A look at various types of CSS selectors and differences between them.

CSS styling can get very specific and you can target less classes and IDs in the HTML markup, and instead target cascading HTML elements – here we take a look at the various CSS Selectors, and give some simple examples of how the selector is written and what it targets.

Descendant Selector

The descendant selector works down the HTML structure in order of what has been written and selects any elements which are a child, descended from the parent element

div p {
//css-styles
}

In this instance all <p> tag that descends from its parent <div> will be targeted.

Child Selector

A child selector selects the immediate child of the parent selector and a ‘greater than’ sign > is used between parent and child, so this will select multiple child elements if they exist.

div > p {
//css-styles
}

Selects all paragraphs in the <div>, the selector selects all <p> tags that are children only of the <div> tag, but not any <p> tags that are not immediate children of the parent

div article > h2 {
//css-styles
}

Combines a descendant selector with a child selector, selecting any <h2> element that is a child of an <article> that descends from a <div>

So what is the difference between a child and descendant selector?

<div><p>this is div text</p><article><p>this is article text</p></article></div>

div p {
//css-styles
}

The selector above ,selects all <p> tags that descend including <p> tags nested in other child elements of the <div>, so in the example of HTML above will also select the <p> tag in the <article>.

<div><p>this is div text</p><article><p>this is article text</p></article></div>

div > p {
//css-styles
}

The selector above , selects only <p> tags that are immediate children of <div> – so not the <p> tag in the <article>.

<article><p>this is article text</p></article>

This <p> tag wouldn’t be selected in this instance.

Adajcent Selector

The adajecent selector selects elements based on the preceding element and separated by a plus sign in the selector ‘+‘

p+p {
//css-styles
}

selects the 2nd <p> tag

h2+p+p {
//css-styles
}

selects the 2nd <p> tag following a <h2> tag

div>h2+p+p {
//css-styles
}

mixing a child and an adjacent selects the 2nd <p> tag following a <h2> tag which is a child of a <div> tag

Attribute Selector

The attribute selector can select a HTML element based on an attribute assigned to it and more extensively selected by adding in the value of the attribute. The attribute is selected by surrounding the attribute name in [brackets] superceding the HTML element or by adding in the value by preceding it with an equals sign ‘=’ and surrounding it in “double quotes”

So the attribute is selected

p[class] {
//css-styles
}

Any <p> tag with a class attribute is selected

p[class="first"] {
//css-styles
}

Any <p> tag with a class attribute of ‘first‘ is selected

input[type="submit"] {
//css-styles
}

This selects the input element with a type of submit

Further to this type of selecting which is very cool, you can add in textual pattern matching with ~, $, *, ^, which can select multiple elements with matching patterns in the value of the attribute, how they are formatted are as follows:

• ~ = includes
• $ = ends
• * = matches
• ^ = starts

p[class~="first"] {
//css-styles
}

Selects all <p> tags which include a value of ‘first‘ as a class value literal string

a[href^="http://"] {
//css-styles
}

Selects all <a> tags with a starting value of http:// in the href attribute

a[href$=".pdf"] {
//css-styles
}

Selects all <a> tags with an ending value of .pdf in the href attribute

h1[title*="staff"] {
//css-styles
}

Selects all <h1> tags with a matching ‘staff‘ word in the value of the title attribute

div[class^="wp-caption"] {
//css-styles
}

Selects all div tags with a starting class name of wp-caption in the class attribute

Dynamic Pseudo Class Selector

This dynamic pseudo selector specialises in selecting elements in their various states, mostly for the different link states – a word pattern, ‘Love Hate’ is sometimes used to remember the order that they are best set, they are separated from the preceding element with a colon and no space “:”

a:link {}
a:visit {}
a:hover {}
a:active {}

Typically they are used for links tags <a> but can be used for any element.

Also you can target anchor links when used with the #anchor-link-name in the URL and is selected like so

a:target {
//css-styles
}

Structural Pseudo Class Selector

The structural pseudo selector allows you to select elements based on their structural position in the HTML markup

p:first-child {
//css-styles
}

Selects the first and only <p> tag from its parent element and subsequent <p> tags from adjacent similar parent elements – but only if it is actually the first <p> element if another element precedes it, it doesn’t get selected.

p:first-of-type {
//css-styles
}

Selects the first <p> tag from its parent element and subsequent <p> tags from adjacent similar parent elements, if another element precedes it, it still does get selected.

p:only-child {
//css-styles
}

Selects the existence of a single <p> tag within its parent element

These can also be used with the words ‘last-child‘ and ‘last-of-type‘.

nth-Child Pseudo Class Selector

This pseudo class selector targets elements based on numbering of elements in the HTML mark up, its format is also structured by the element a single colon :, followed by nth-child and then a numbered argument surrounded by brackets. This selector is typically used in list item mark up but can be used with other HTML elements.

li:nth-child(5) {
//css-styles
}

Selects the 5th <li> item in a list.

li:nth-child(5n) {
//css-styles
}

Selects every 5th <li> item in a list.

li:nth-child(odd) {
//css-styles
}

Selects every odd <li> item in a list.

li:nth-child(even) {
//css-styles
}

Selects every even <li> item in a list.

li:nth-child(5n+3) {
//css-styles
}

Selects every 5th <li> item in a list starting after the 3rd <li>, the 3rd <li> in this case is also selected.

li:nth-child(-5n+3) {
//css-styles
}

Using a minus makes the count start the other way – here the count starts at the 3rd from the end and selects that and every 5 element going up.

A variation on nth-child is nth-last-child which be default works upwards in structure rather than downwards.

li:nth-last-child(2n+5) {
//css-styles
}

Starts from the bottom 5th element and selects every 2nd <li> going upwards, using a negative value here would go downwards.

Another variation on nth-child and nth-last-child is nth-of-type and nth-last-of-type – the difference between these types are that the latter are more strict in terms of selecting the element type whereas the former is more constrained by the structure of the markup; parent/child relationship.

div.field-item p:nth-of-type(3n) {
//css-styles
}

Select every 3rd sequential <p> tag that is a descendant of a <div> with a class of ‘field-item‘

Pseudo Element Selector

The pseudo element selector makes selections based on element position, it has slightly different syntax using a double colon :: between element and selector, the double colon is the official CSS3 syntax, however it is not supported by IE8, you can actually use a single colon : which is from CSS2 syntax and is supported by IE8, so decide to use which one based on your thoughts around IE8.

p::first-letter {
//css-styles
}

selects the first letter of the word that starts within the <p> tags

p::first-line {
//css-styles
}

selects the first line of the text that is found within the <p> tags

Another use of the pseudo element selector is to inject content before or after a targetted element – this content is not part of the DOM and is not seen in the HTML markup, the content can take the form of a literal string or an image if a URL is passed in, as well as quotes and also values that are associated with an elements attribute.

p::after {content: " this text follows";}

Adds in ” this text follows” after every <p> tag.

a::after {
content: " "attr(href);}

Adds in a space followed by the href attribute value and puts that content right after the <a> tag.

Conversely you can ::before, check out how you can use it to create CSS only blockquotes by injecting a big quote before the blockquote and an em dash before the author in the cite element, if you use the snippet of code you will need to adjust the position values to fit your page/markup:

The HTML

<blockquote><p>Blockquote text goes here</p><cite>Quoted by me</cite></blockquote>

The CSS

blockquote::before {
display: block;
color: #999999;
content: "\201C";
display: block;
font-size: 40px;
bottom:300px;
left: 20px;
position: absolute;}

blockquote cite {
color: #999999;
font-size: 12px;
display: block;
margin-top: 5px;}

blockquote cite::before {
content: "\2014 \2009";}

The Result

Blockquote text goes here,
this is seriously good
CSS…

Quoted by me

That’s about it – I find myself returning to this page to check syntax and selector choice there’s always many ways to skin a cat!