CSS selectors are the part of CSS rules that determine what HTML elements that are affected by the CSS rule. Here is an example CSS rule:
There are several different types of CSS selectors. Both CSS 1.0, CSS 2.1 and CSS 3.0 added selectors to the CSS standard. The rest of this text will go through these CSS selectors.
The universal CSS selector is used to select all elements. It is marked with a *. Here is a universal CSS selector example:
The universal CSS selector is not so often used alone. It is more often used with a child selector or descendant selector.
These three CSS rules each have a selector that selects all of a certain type of HTML elements. The first CSS selector selects all div elements. The second CSS selector selects all p elements. The third CSS selector selector selects all input elements.
You can select any HTML element using the element selector. All elements of that type / name will be affected by the CSS rule having the element selector.
The class selector is another very commonly used CSS selector. The class selector selects all HTML elements which have the given CSS class set on them. You set a CSS class on an HTML element by giving the HTML element a class attribute. Here is an example:
As you can see, you can give different types of HTML elements the same CSS class. That is fully valid (in case you need that).
You target these HTML elements by creating a CSS rule with the same name as the CSS class to select, and prefix with a dot (.). Here is a CSS rule example that selects the two HTML elements from the example above:
The CSS rule example selects all HTML elements with the CSS class green set on them. Notice the . in the beginning CSS selector part (.green) of the CSS rule. This signals to the browser that this is a CSS class selector, and that the name after the . is the name of the CSS class to select.
You can use any name as a CSS class. There are no built-in CSS class names. Use CSS class names that start with letters - not numbers or other special characters. CSS class names are case sensitive, so GREEN is not the same CSS class as green or Green.
The ID selector selects the HTML element which has the given ID. The ID of an HTML element is set via the id attribute. Here is an example:
You can select this HTML element using an ID selector, by prefixing the CSS selector with a # and then write the ID of the HTML element. Here is an example that selects the above HTML element by its ID:
This example uses the # to signal that the selector is an ID selector, and then the ID myElement right after the # to mark what ID to select.
Notice how the two a elements have different attributes. The first a element has a href attribute, and the second a element has a name attribute.
This example CSS rule selects all HTML elements that have an href attribute. That means the first a element in the HTML shown earlier will be targeted by the CSS rule, but the second a element will not.
It is the [attrName] that makes up the attribute selector. Inside the square brackets ([ ]) you write the name of the attribute to target.
You can also select HTML elements based on their attribute values. I will show you a few ways to do that in the following sections.
You can select HTML element based on what an attribute value starts with. Instead of using the = sign between attribute name and attribute value, you write ^=. Here is an example:
This example will select all HTML elements that has an href attribute which value starts with http://.
Notice the |= part of the selector in the above CSS rule. That part signals that the attribute value should either be en or start with en- in the language code.
You can also select HTML elements based on what an attribute value ends with. Instead of writing ^= you write $= between the attribute name and attribute value. Here is another example:
This example CSS rule selects all HTML elements which have an href attribute which value ends in .png.
This example CSS rule selects all HTML elements with an href attribute which contains the substring jenkov.com somewhere in its attribute value. Thus, it will select the two first of the below a elements, but not the third:
The CSS attribute contains word selector can select HTML elements with attribute which value contains a given word. The difference between this selector and the attribute contains selector is, that for this selector the targeted substring must be surrounded by spaces in the attribute value. Put differently, it must appear as a word inside the attribute value, not just an arbitrary substring.
Both of these div elements contains the substring programmer inside their myattr attribute values, but only the second div element contains it as a whitespace separated word. Thus, the selector in this CSS rule:
The CSS group selector is used to group together multiple selectors into one, big CSS selector. That means, that all elements targeted by any of the selectors will be affected by the CSS rule. Here is a CSS group selector example:
Notice how the example has two selectors separated by a comma (div and p). The comma makes this a group selector, meaning the CSS rule is applied to all elements matching one (or more) of the selectors that are grouped together.
The child CSS selector is used to select all elements that are immediate children of some other element. Here is a child CSS selector example:
This example selects all a elements which are children of li elements. Thus, only the second a element would be selected in this HTML:
The first a element is not a child of a li element. Thus it is not selected by the child selector. The second a element on the other hand, is a child of a li element, so the CSS rule is applied to that element.
It is the > character which marks a selector as a child selector. Notice the > character between the li and a in the selector in the example above.
This example only selects the a elements which are children of li which are again children of ol elements. Thus, the CSS rule is not applied to a elements nested inside a ul (unordered list).
The descendant CSS selector is used to select elements that are descendants of other elements. The selected elements do not have to be immediate children of the specified ancestor. They just have to be nested inside the ancestor somewhere. That is how descendant selectors are different from child selectors. Look at this HTML:
The descendant selector is marked via the space character. Notice the space between the ol and the a in the selector in the above CSS rule. This space specifies that this selector is a descendant selector, and that it selects all a elements that are descendants of (nested inside) ol elements. It does not care how far down in the element hierarchy the a is nested, as long as it has a ol as an ancestor somewhere higher up in the hierarchy.
The adjacent sibling CSS selector is used to select HTML elements that are adjacent siblings of some other HTML element. Look at this HTML:
All of the HTML elements in this example are siblings, meaning the have the same parent HTML element (the body element). But they are not all adjacent siblings. By adjacent is meant that the elements are following each other immediately, with no other HTML elements in between.
This selects all p elements which are have a h1 element preceding it as sibling. In the HTML above, that means the first p element after the h1 element, but not the following p elements, because they are preceded by a p element, not a h1 element.
Similarly you could select all table elements adjacent to a p element using this adjacent sibling selector:
The CSS general sibling selector is used to select HTML elements which have the same parent. Unlike with the adjacent sibling selector, the general sibling selector selects all elements that are preceded by another element (inside the same parent), even if the two elements are not directly adjacent.
A CSS rule using a general sibling selector can be used to select all p elements which are preceded by another p element somewhere (inside the same parent), like this:
Notice the ~ character between the two p's in the selector part of the CSS rule. The ~ character is what marks this as a general sibling selector.
CSS has defined a set of pseudo classes which you can use in your CSS selectors. A CSS pseudo class is actually a state of an HTML element. Thus, you can assign different CSS styles to HTML elements depending on the HTML element state. CSS 3.0 added quite a few new CSS pseudo classes to the standard. I will cover each of these CSS pseudo classes in the following sections.
The a element (which represents a link) can be in four different states, each of which has an associated pseudo class:
The a:active pseudo class does not "live long". It is only applied in the short time between a user clicks a link (that thus becomes active), and until the browser loads the page the link points to.
This example's first CSS rule selects all p elements that are the first child of their parent elements. In this example that would be the p element with the body First Child. This HTML element has its background color set to #ff00ff.
The example's second CSS rule selects all p elements that are the last child of their parent elements. In this example that would be the p element with the body Second Child.
The :nth:child() CSS pseudo class selects the nth elements of some parent. The n could be every element, every 2nd element, every 3rd element etc. Here is an example:
This example CSS rule selects every second p element inside their parent elements. This means the p elements with the bodies 2nd child, 4th child and 6th child.
It is the 2 in p:nth-child(2n) that specifies that it is every second p element that is to be selected. If you write p:nth-child(3n) instead, you would select every third p element of their parents.
The :first-of-type CSS pseudo class selects elements that are the first child of its type inside its parent element. The :last-of-type CSS pseudo class selects elements that are the last of its type inside its parent element. Here is an example:
This example contains 2 CSS rules. The p:first-of-type will select the p elements that are the first p elements of their parents, regardless of what other elements the parent contains. In this example that is the p element with the body 1st p. The p:last-of-type will select the p elements that are the last p elements of their parents. In this example that would be the p element with the body 3rd p.
The nth-of-type() CSS pseudo class selects all the elements that are the nth of their type inside their parents. Inside the parentheses you specify if they are to be every element, every second, every third etc. element of its type in its parent. Here is an CSS nth-of-type() example:
The CSS rule in this example selects every second p element inside their parent elements. Thus, the p elements with the bodies 2nd p, 4th p and 6th p. You could change the 2n to 3n and get every third element of its kind inside its parent.
The :nth-last-child() CSS pseudo class selects the nth last child of its parent. It works similarly to the :nth-child() pseudo class, except it counts the elements backwards from the last towards the first.
The :nth-last-of-type() CSS pseudo class selects the nth last child of its kind inside its parent. It works similarly to the :nth-of-type() pseudo class except it counts the elements backwards, from the last element and towards the first element inside each parent.
The :only-of-type CSS pseudo class selects all elements that are the only child of its kind inside their parent.
The :empty CSS pseudo class selects all HTML elements that are empty, meaning they have no text or child elements inside their body. Here is an example :empty pseudo class example:
This CSS rule selects all input fields which have a type attribute with the value checkbox, and which are checked.
CSS pseudo elements are parts elements that can be styled, but which are not by themselves real HTML elements.
For backwards compatibility, the single colon notation still works in most browsers, but you are encouraged to use the double colon notation.
There are several different pseudo elements you can use. The CSS pseudo elements are covered in the following sections.
The :first-letter CSS pseudo element can be used to select the first letter of HTML elements. For instance, to select the first letter of all p elements you would write:
Like with :first-letter you can select the first line of an HTML element, and style that differently. The first line is not the first sentence. It is the first horizontal line of text, regardless of whether that constitutes a less than or more than a full sentence.
If you had used the :before pseudo element instead, the generated content would have been inserted before the first content instead of after the last content.
The ::selection pseudo element refers to the selected content when the user selects e.g. a passage of text with the mouse. This pseudo element is supported in IE and Chrome, but not in Firefox. It was part of the CSS 3.0 propposal, but is no longer part of the specification.