A collection ofCSSSelectors

Navigate by using the keys
and

We know these..# id-selector
. class-selector

Coverage

Common CSS Selectors: *; E > F; E + F; E ~ F
Position pseudo class selectors: E:first-child; E:last-child; E:nth-child(n); E:not(s)
Content-related pseudo "element" selectors: E:before; E:after
Attribute selectors: E[foo]; E[foo="bar"]; E[foo~="bar"]; E[foo^="bar"]; E[foo$="bar"]; E[foo*="bar"]

Common CSS selectors*

The wildcard

HTML

<style>
  #ex-1 * {
    border: 1px solid red;
  }
  
</style>
<div id="ex-1"> 
  <h3>Header Level 3</h3>
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Result

Header Level 3

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Common CSS selectorsE>F

an F element child of an E element

HTML

<style>
  #ex-2 .list > li {
    border: 1px solid red;
  }
  
</style>
<div id="ex-2">
  <h3>Header Level 3</h3>
  <ul class="list">
    <li>Lorem ipsum dolor sit amet.
      <ul>
        <li>Nested!</li>
      </ul>
    </li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.
      <ul>
        <li>Fancy.</li>
        <li>Nested.</li>
        <li>List.</li>
      </ul>
    </li>
  </ul>
</div>

Result

Header Level 3

Lorem ipsum dolor sit amet.
- Nested!
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
- Fancy.
- Nested.
- List.

HTML

<style>
  #ex-3 > h3 {
    border: 1px solid red;
  }
  
</style>
<div id="ex-3"> 
  <h3>Direct decendant of #ex-3</h3>
  <article> 
    <h3>Header inside article</h3>
  </article>
</div>

Result

Direct decendant of #ex-3

Header inside article

Common CSS selectorsE+F

an F element immediately preceded by an E element

HTML

<style>
  #ex-4 h3 {
    color: red;
  }
  #ex-4 h3 + h3 {
    color: blue;
    margin-left: 1em;
  }
  
</style>
<div id="ex-4">
  <h3>Normal h3</h3>
  <p>some text separating text</p>
  <h3>First of two h3 in a row</h3>
  <h3>The next sibling of the first h3</h3>
</div>

Result

Normal h3

some text separating text

First of two h3 in a row

The next sibling of the first h3

HTML

<style>
  #ex-4 h3 {
    color: red;
  }
  #ex-4 h3 + h3 {
    color: blue;
    margin-left: 1em;
  }
  
</style>
<div id="ex-4">
  <h3>Normal h3</h3>
  <p>some text separating text</p>
  <h3>First of two h3 in a row</h3>
  <h3>The next sibling of the first h3</h3>
  <h3>Another sibling, next to the second h3</h3>
</div>

Result

Normal h3

some text separating text

First of two h3 in a row

The next sibling of the first h3

Another sibling, next to the second h3

Common CSS selectorsE~F

an F element preceded by an E element

HTML

<style>
  #ex-4-2 h3 {
    color: red;
  }
  #ex-4-2 h3 ~ h3 {
    color: blue;
    margin-left: 1em;
  }
  
</style>
<div id="ex-4-2">
  <h3>Normal h3</h3>
  <h3>Second h3</h3>
  <p>some text separating text</p>
  <h3>Third h3 in a row</h3>
  <h3>The next sibling of the third h3</h3>
  <h3>Another sibling, next to the fourth h3</h3>
</div>

Result

Normal h3

Second h3

some text separating text

Third h3 in a row

The next sibling of the third h3

Another sibling, next to the fourth h3

HTML

<style>
  #ex-4-3 ul {
    display: inline;
    cursor: pointer;
    padding:0;
  }
  
  #ex-4-3 li {
    display: block;
    float: left;
    font-size: 2em;
    padding: 2px;
  }
  
  #ex-4-3 ul:hover li{
    color: #fdc162;
  }
  
  #ex-4-3 li:hover ~ li {
    color: #333;
  }
</style>
<div id="ex-4-3">
  <h3>Rating (hover 'em):</h3>
  <ul> 
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
  </ul>
</div>

Result

Rating (hover 'em):

★
★
★
★
★

Position pseudo class selectorsE:first-child

an E element, first child of its parent

HTML

<style>
  #ex-5 ul li:first-child {
    color: blue;
  }
  
</style>
<div id="ex-5">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Result

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Position pseudo class selectorsE:last-child

an E element, last child of its parent

HTML

<style>
  #ex-6 ul li:last-child {
    color: blue;
  }
  
</style>
<div id="ex-6">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Result

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Position pseudo class selectorsE:nth-child(n)

an E element, the n-thchild of its parent

HTML

<style>
  /* odd == 2n+1 */
  #ex-7 ul li:nth-child(odd),
  #ex-7 ul li:nth-child(2n+1) {
    color: blue;
  }
  
</style>
<div id="ex-7">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Result

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

HTML

<style>
  /* even == 2n+0 */
  #ex-8 ul li:nth-child(even),
  #ex-8 ul li:nth-child(2n+0) {
    color: blue;
  }
  
</style>
<div id="ex-8">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
</div>

Result

Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet.
Consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

HTML

<style>
  #ex-9 li {
    display: block;
    float: left;
    padding: 1em;
    background: red;
    margin: 2px;
  }
  
  /* Q: How can we use nth-child to get the li's 
   *    arranged as "FOUR" on one line ? 
   *
   * A: We would have to clear the second F in 
   *    the sequence (the fifth element), and 
   *    then every reoccuring F's in the sequence
   *    (every 4th element after the 5th element).
   */ 
   
  #ex-9 li:nth-child(4n+5) {
    clear: left;
  }
</style>
<div id="ex-9">
  <ul>
    <li>F</li>
    <li>O</li>
    <li>U</li>
    <li>R</li>
    
    <li>F</li>
    <li>O</li>
    <li>U</li>
    <li>R</li>
    
    <li>F</li>
    <li>O</li>
    <li>U</li>
    <li>R</li>
    
    <li>F</li>
    <li>O</li>
    <li>U</li>
    <li>R</li>
  </ul>
</div>

Result

F
O
U
R
F
O
U
R
F
O
U
R
F
O
U
R

F
O
U
R
F
O
U
R
F
O
U
R
F
O
U
R

li:nth-child(4n+5)

Position pseudo class selectorsE:not(s)

an E element that does not match simple selector s

HTML

<style>
  #ex-11 p:not(.no-border) {
    border: 1px solid red;
  }
  
</style>
<div id="ex-11">
  <h3>Header Level 3</h3>
  <p>Regular p tag.</p>
  <p class="no-border">A p tag with the no border class.</p>
  <p>Regular p tag.</p>
  <p>Another regular p tag.</p>
  <p>Yet another regular p tag.</p>
</div>

Result

Header Level 3

Regular p tag.

A p tag with the no border class.

Regular p tag.

Another regular p tag.

Yet another regular p tag.

Content-related pseudo "elements"E:before

selects generated content before an E element

HTML

<style>
  #ex-12 h3:before {
    content: "this is before"; /* Important to set content (if not set) */
    background: red;
  }
  
</style>
<div id="ex-12"> 
  <h3>h3:before example</h3>
</div>

Result

h3:before example

Content-related pseudo "elements"E:after

selects generated content after an E element

HTML

<style>
  #ex-13 h3:after {
    content: "this is after"; /* Important to set content (if not set) */
    background: red;
  }
  
</style>
<div id="ex-13"> 
  <h3>h3:after example</h3>
</div>

Result

h3:after example

HTML

<style>
  #ex-14 h3:after {
    content: ""; /* Important to set content (if not set) */
    background: red;
    display: inline-block; 
    height: 1em;
    width: 1em;
  }
  
</style>
<div id="ex-14"> 
  <h3>h3:after example</h3>
</div>

Result

h3:after example

HTML

<style>
  #ex-15 li {
    color: black;
    background: white;
  }
  #ex-15 li:after {
    content: attr(data-text);
    color: white;
    background: black;
  }
</style>
<div id="ex-15">
  <h3>Content generated :after li with data from attributes:</h3>
  <ul>
    <li data-text="white">black</li>
    <li data-text="yang">yin</li>
    <li data-text="thing">some</li>
  </ul>
</div>

Result

Content generated :after li with data from attributes:

black
yin
some

HTML

<style>
  #ex-99 ul {
    display: inline;
    cursor: pointer;
    padding:0;
  }
  
  #ex-99 li {
    display: block;
    float: left;
    font-size: 2em;
    padding: 2px;
  }
  
  #ex-99 ul:hover li{
    color: #fdc162;
    position: relative;
  }
  
  #ex-99 li:hover ~ li {
    color: #333;
  }
  
  #ex-99 ul:hover li:before{
    color: #333;
  }
  
  #ex-99 li:hover:before{
    content: attr(alt);
    position: absolute;
    top: -0.75em;
    left: 1em;
    font-size: 12px;
    text-align: center;
    width: 10em;
    margin-left: -4.775em;
  }
</style>
<div id="ex-99">
  <h3>Rating (hover 'em):</h3>
  <ul> 
    <li alt="Poor">★</li>
    <li alt="Suficcient">★</li>
    <li alt="Ok">★</li>
    <li alt="Good">★</li>
    <li alt="Excellent!">★</li>
  </ul>
</div>

Result

Rating (hover 'em):

★
★
★
★
★

Attribute selectorsE[foo]

an element E with a "foo " attribute

HTML

<style>
  #ex-16 a {
    color: red;
  }
  #ex-16 a[href] {
    color: green;
  }
  
</style>
<div id="ex-16">
  <ul>
    <li><a href="">Link</a></li>
    <li><a>Link, href missing</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
  <p>Note: Green links contains href attributes.</p>
</div>

Result

Link
Link, href missing
Link
Link

Note: Green links contains href attributes.

Attribute selectorsE[foo="bar"]

an element E whose "foo " attribute value is exactly equal to "bar"

HTML

<style>
  #ex-17 li[feeling="blue"] {
    color: blue;
  }
  
</style>
<div id="ex-17">
  <ul>
    <li feeling="blue">Li is feeling blue</li>
    <li feeling="red">Li is feeling red</li>
    <li feeling="cyan">Li is feeling cyan</li>
    <li feeling="blue">Li is feeling blue</li>
    <li feeling="orange">Li is feeling orange</li>
  </ul>
</div>

Result

Li is feeling blue
Li is feeling red
Li is feeling cyan
Li is feeling blue
Li is feeling orange

Attribute selectorsE[foo~="bar"]

an element E whose "foo " attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

HTML

<style>
  #ex-18 li[colors~="blue"] {
    color: blue;
  }
  
</style>
<div id="ex-18">
  <ul>
    <li colors="red white blue">red white blue</li>
    <li colors="red white">red white</li>
    <li colors="red blue">red blue</li>
    <li colors="red">red</li>
    <li colors="blue">blue</li>
  </ul>
</div>

Result

red white blue
red white
red blue
red
blue

Attribute selectorsE[foo^="bar"]

an element E whose "foo" attribute value begins exactly with the string "bar"

HTML

<style>
  #ex-19 a {
    color: red;
  }
  #ex-19 a:after {
    content: " (" attr(href) ")";
  }
  #ex-19 a[href^="https"] {
    color: green;
  }
  
</style>
<div id="ex-19">
  <ul>
    <li> <a href="http://vg.no/">VG</a></li>
    <li> <a href="https://facebook.com/">Facebook</a></li>
    <li> <a href="http://google.com/">Google</a></li>
    <li> <a href="https://linkedin.com/">LinkedIn</a></li>
  </ul>
  <p>Note: Links in green are secured by SSL.</p>
</div>

Result

Note: Links in green are secured by SSL.

Attribute selectorsE[foo$="bar"]

an element E whose "foo" attribute value ends exactly with the string "bar"

HTML

<style>
  #ex-20 img {
    border: 3px solid red;
  }
  #ex-20 img[src$=".jpg"] {
    border-color: green;
  }
  
</style>
<div id="ex-20">
  <ul>
    <li> <img src="http://placehold.it/100&text=.jpg"/></li>
    <li> <img src="http://placehold.it/100&text=.png"/></li>
    <li> <img src="http://placehold.it/100&text=.svg"/></li>
    <li> <img src="http://placehold.it/100&text=.jpg"/></li>
  </ul>
  <p>Note: images with green borders is JPGs.</p>
</div>

Result

Note: images with green borders is JPGs.

Attribute selectorsE[foo*="bar"]

an element E whose "foo" attribute value contains the substring "bar"

HTML

<style>
  #ex-21 a {
    color: black;
  }
  #ex-21 a:after {
    content: " (" attr(href) ")";
  }
  #ex-21 a[href*=".no/"] {
    color: green;
  }
  
</style>
<div id="ex-21">
  <ul> 
    <li> <a href="http://vg.no/">VG</a></li>
    <li> <a href="http://vg.no/tv">VG TV</a></li>
    <li> <a href="https://facebook.com/">Facebook</a></li>
    <li> <a href="http://google.com/">Google</a></li>
  </ul>
  <p>Note: green links is Norwegian web sites.</p>
</div>

A collection ofCSSSelectors

Navigate by using the keys and

We know these..# id-selector. class-selector

Coverage

Common CSS selectors*

The wildcard

HTML

Result

Header Level 3

Common CSS selectorsE>F

an F element child of an E element

HTML

Result

Header Level 3

HTML

Result

Direct decendant of #ex-3

Header inside article

Common CSS selectorsE+F

an F element immediately preceded by an E element

HTML

Result

Normal h3

First of two h3 in a row

The next sibling of the first h3

HTML

Result

Normal h3

First of two h3 in a row

The next sibling of the first h3

Another sibling, next to the second h3

Common CSS selectorsE~F

an F element preceded by an E element

HTML

Result

Normal h3

Second h3

Third h3 in a row

The next sibling of the third h3

Another sibling, next to the fourth h3

HTML

Result

Rating (hover 'em):

Position pseudo class selectorsE:first-child

an E element, first child of its parent

HTML

Result

Position pseudo class selectorsE:last-child

an E element, last child of its parent

HTML

Result

Position pseudo class selectorsE:nth-child(n)

an E element, the n-thchild of its parent

HTML

Result

HTML

Result

HTML

Result

li:nth-child(4n+5)

Position pseudo class selectorsE:not(s)

an E element that does not match simple selector s

HTML

Result

Header Level 3

Content-related pseudo "elements"E:before

selects generated content before an E element

HTML

Result

h3:before example

Content-related pseudo "elements"E:after

selects generated content after an E element

HTML

Result

h3:after example

HTML

Result

h3:after example

HTML

Result

Navigate by using the keys
and

We know these..# id-selector
. class-selector