CSS

Posted on September 2, 2022

Tags: javascript

Remember to Ctrl + Shift + R , to hard refresh as chrome will cache your old CSS.

1 Matching Nested Elements >

Using “pre > code.sourceCode” is how to match nested HTML elements.

pre > code.sourceCode {
background-color: #f8f8f8;
}

<pre>
  <code class="sourceCode">
    <span>
        ...</span></code></pre>

2 General matching

ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}

3 Wildcard class names ^= *=

Below the CSS selector matches beginning occurrences of “sourceCode…” within a div element when using class^.
When using asterisk, class* it matches the term anywhere.

div[class^="sourceCode"]{
    background-color: #f8f8f8;
}

div[class*="sourceCode"]{
    background-color: #f8f8f8;
}

<div class="sourceCode ...">...</div>

<div class="... sourceCode ...">...</div>

4 Selecting by id using #

#logo

div#logo > a

<div id = "logo">
    <a> ...</a></div>

5 Inverting color and resizing SVG

note 1rem is size of font

<svg width="3rem" height="3rem" style = "filter:invert(100)"> 
    ...</svg>

5.1 Psuedo Classes match on Behaviors :something

match on behaviors

example

:link - matches on unclicked links
:focus - matches on focus

#content a:focus{
    border-bottom: 0 px;
}

matches link elements “<a href..>” inside “<..id = content..>” when focused

<div id = content>
<a href=...>somelink</a>
    </div>

/* Enable hover interaction if javascript is not available */
@media screen and (min-width: $screen-lg) {
  ul.main-menu .submenu {
    display: none;
  }

  ul.main-menu .top-level-entry-container {
    &:hover,
    &:focus-within {
      .submenu {
        display: block;
      }
    }
  }