As a continuation of my previous post Understanding CSS2 and CSS3 attribute selectors I wanted to bring everyones attention to some of the less used but very powerful CSS selectors. I have sorted these by their IE support because they are all supported by all of the other modern browsers.

IE6+ SUPPORT

S1::first-line: Pseudo element selector

Selects the first line of text in an element which matches the S1 selector.

.dog::first-line

S1::first-letter: Pseudo element selector

Selects the first letter in an element which matches the S1 selector.

.dog::first-letter

IE7+ SUPPORT

S1 ~ S2 : Sibling selector

Selects any element which matches the S2 selector as long as it is a sibling of the S1 selector.

.dog ~ .leg
/* markup */
<div class="dog"></div>
<div class="leg"></div> /* match */
<div class="leg"></div>  /* match */

S1 > S2 : Immediate children selector

Only selects elements which match the S2 selector which are immediate children of the S1 selector.

.dog > .leg
/* markup */
<div class="dog">
  <div class="leg"> /* match */
    <div class="leg"></div>  /* will not match */
  </div>
</div>

S1 + S2 : Adjacent selector

Will select a single element which matches the S2 selector as long as it is immediately after the S1 selector element.

.dog + .leg
/* markup */
<div class="dog"></div>
<div class="leg"></div> /* match */
<div class="leg"></div>  /* will not match */

S1:first-child : Pseudo element selector

Only selects the element which matches the S1 selector that is the first child of it’s parent element.

.leg:first-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
  <div class="leg"></div>  /* will not match */
</div>

S1:last-child : Pseudo element selector

Only selects the element which matches the S1 selector that is the last child of it’s parent element.

.leg:last-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div>  /* match */
</div>

IE9+ SUPPORT

S1:not(S2) : Negation pseudo class selector

Selects all elements which match the S1 selector except those which also match S2

.dog:not(.cat)
/* markup */
<div class="dog"></div> /* match */
<div class="cat leg"></div>  /* will not match */
<div class="dog leg"></div> /* match */

S1:only-child : Pseudo class selector

Selects elements which match the S1 selector and are the only child of their parent container.

.leg:only-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
</div>
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div> /* will not match */
</div>

S1:first-of-type : Pseudo class selector

Selects the elements that match the S1 selector which are the first of a type in it’s parent container.

.dog p:first-of-type
/* markup */
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:only-of-type : Pseudo class selector

Selects elements that match the S1 selector which do not have any siblings within their parent container.

.dog div:only-of-type
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
  <p class="leg"></p> /* will not match */
</div>
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div> /* will not match */
</div>

S1:nth-child(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child of its parent container.

.dog p:nth-child(2)
<div class="dog">
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:nth-last-child(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child of its parent container counted from the last child.

.dog p:nth-last-child(1)
<div class="dog">
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
</div>

S1:nth-of-type(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child type of its parent container.

.dog p:nth-of-type(2)
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:nth-last-of-type(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child type of its parent container counted from the last child.

.dog p:nth-of-type(1)
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
</div>

Using some of these more advanced/unknown selectors can make your styling a lot easier without having to rely on more classes or javascript tricks. I hope I got them all, if I missed one that you think should be included please comment below or mention me on twitter @fromanegg and I’ll be sure to add it. Thanks for reading!