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.
S1::first-letter: Pseudo element selector
Selects the first letter in an element which matches the S1 selector.
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 */
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!
