CSS Selectors
Jakob Jenkov |
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:
div {
border: 1px solid black;
}
The CSS selector part of the above CSS rule is this:
div
This selector means that all div elements should be targeted by the 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.
Universal Selector
The universal CSS selector is used to select all elements. It is marked with a *.
Here is a universal CSS selector example:
* {
font-size: 18px;
}
This example selects all HTML elements and set their font-size CSS property.
The universal CSS selector is not so often used alone. It is more often used with a child selector or descendant selector.
Element Selector
The element selector is the most basic CSS selector. It selects all the HTML elements of the same type.
For instance, all div elements or p elements.
With the element CSS selector you simply write the element name of the elements to apply the CSS rule to. Here are three examples:
div {
border: 1px solid black;
}
p {
font-size: 18px;
}
input {
border: 1px solid #cccccc;
}
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.
Class 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:
<div class="green"> Text... </div> <p class="green"> Paragraph... </p>
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:
.green {
border: 1px solid green;
}
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.
ID Selector
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:
<div id="myElement"> My Element </div>
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:
#myElement {
border: 1px solid blue;
}
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.
Attribute Selector
The CSS attribute selector is used to select HTML elements by their attributes. Look at this HTML:
<a href="http://tutorials.jenkov.com"> Java and Web Development Tutorials</a>
<a name="jump-here"></a>
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.
You can select these two a elements individually using an attribute selector. Here is a
CSS attribute selector example:
[href] {
font-size: 18px;
}
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.
Attribute Equals
You can select an HTML element based on its attribute value like this:
[href="http://jenkov.com"]
You add a = after the attribute name, and then you write the desired attribute value. In this
case I want to select all HTML elements that have an href attribute with the value
http://jenkov.com.
Attribute Begins With
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:
<a href="http://jenkov.com"></a>
<style>
[href^="http://"] {
font-size: 18px;
}
</style>
This example will select all HTML elements that has an href attribute which value starts with
http://.
Attribute Begins With Language Code
The CSS attribute begins with language code selector is used select HTML elements with a given language code. Look at this HTML:
<p lang="en" > English text</p> <p lang="en-UK"> UK English text</p> <p lang="en-US"> US English text</p>
You can then use the CSS attribute begins with language code selector to select all HTML elements with a
language code that starts with en-, like this:
[lang|="en"] {
font-size: 18px;
}
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.
Attribute Ends With
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:
<a href="http://jenkov.com"></a>
<style>
[href$=".png"] {
font-size: 18px;
}
</style>
This example CSS rule selects all HTML elements which have an href attribute which value
ends in .png.
Attribute Contains
The CSS attribute contains selector is used to select all HTML elements with a given attribute which contains the specified substring. Here is a CSS attribute contains selector example:
[href*="jenkov.com"] {
font-size: 18px;
}
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:
<a href="http://jenkov.com">Jenkov.com</a> <a href="http://tutorials.jenkov.com">Tutorials</a> <a href="http://google.com">Google</a>
Attribute Contains Word
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.
Look at these two HTML elements:
<div myattr="iamaprogrammer"></div> <div myattr="i am a programmer"></div>
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:
[myattr~="programmer"] {
}
... will only select the second of the div elements shown above.
Group Selector
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:
div, p {
font-size : 18px;
}
This example CSS rule sets the font size of both div and p elements.
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.
Child Selector
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:
li>a {
font-size: 18px;
}
This example selects all a elements which are children of li elements.
Thus, only the second a element would be selected in this HTML:
<a href="...">This will not be selected</a>
<ul>
<li><a href="...">This WILL be selected</a></li>
</ul>
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.
You can use more than one level of child selectors. Here is an example:
ol>li>a {
font-size: 18px;
}
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).
Descendant Selector
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:
You can select all a elements nested inside the ol element using this
CSS rule:
ol a {
font-size : 18px;
}
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.
Adjacent Sibling Selector
The adjacent sibling CSS selector is used to select HTML elements that are adjacent siblings of some other HTML element. Look at this HTML:
<body>
<h1>Headline</h1>
<p>
</p>
<p>
</p>
<table>
</table>
<table>
</table>
</body>
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.
You can select the first p element after the h1 using this adjacent sibling
selector:
h1+p {
}
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:
p+table {
}
General 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.
Look at this HTML example:
<body>
<h1>Headline</h1>
<p>
</p>
<p>
</p>
</body>
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:
p~p {
}
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.
Pseudo Classes
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.
a:link, a:visted, a:hover, a:active
The a element (which represents a link) can be in four different states, each of which
has an associated pseudo class:
| Pseudo Class | Description |
| a:link | Selects all links that have not yet been visited. |
| a:visited | Selects all links that have already been visited. |
| a:hover | Selects all links the mouse hovers over. |
| a:active | Selects all links that have been clicked - until the new page is loaded. |
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.
Here are some a element pseudo class examples:
a:link { color: #00ff00; }
a:visited { color: #009900; }
a:hover { color: #66ff66; }
a:active { color: #ffff00; }
These example set the colors of the link (a element) to different colors depending
on the link state (pseudo class).
:first-child, :last-child
The :first-child CSS pseudo class selects all elements that are the first child of some parent HTML element.
The :last-child CSS pseudo class selects all elements that are the last child of some parent HTML element.
Here is an example:
<div>
<p>First child</p>
<p>Second child</p>
</div>
<style>
p:first-child {
background-color: #ff00ff;
}
p:last-child {
background-color: #00ff00;
}
</style>
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.
:nth-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:
<div>
<p>1st child</p>
<p>2nd child</p>
<p>3rd child</p>
<p>4th child</p>
<p>5th child</p>
<p>6th child</p>
</div>
<style>
p:nth-child(2n) {
background-color: #ffff00;
}
</style>
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.
:first-of-type, :last-of-type
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:
<div>
<h2>1st h2</h2>
<p>1st p</p>
<h2>2nd h2</h2>
<p>2nd p</p>
<h2>3rd h2</h2>
<p>3rd p</p>
</div>
<style>
p:first-of-type {
background-color: #ffff00;
}
p:last-of-type {
background-color: #00ff00;
}
</style>
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.
:nth-of-type()
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:
<div>
<h2>1st h2</h2>
<p>1st p</p>
<p>2nd p</p>
<p>3rd p</p>
<p>4th p</p>
<p>5th p</p>
<p>6th p</p>
</div>
<style>
p:nth-of-type(2n) {
background-color: #ffff00;
}
</style>
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.
:nth-last-child()
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.
:nth-last-of-type()
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.
:only-child
The :only-child CSS pseudo class selects all elements that are the only child
of their parent.
:only-of-type
The :only-of-type CSS pseudo class selects all elements that are the only child
of its kind inside their parent.
:empty
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:
div:empty {
}
This CSS rule selects all div elements that are empty.
:not()
The :not() CSS pseudo class selects all of those HTML elements that do not match
the CSS selector given as parameter (inside the parentheses) to the :not() pseudo class.
Here is an example:
p:not(:last-child) {
border-bottom: 1px solid #cccccc;
}
This CSS rule selects all p elements which are not the last child of their parents.
:checked
The :checked CSS pseudo class selects all input fields that are checked, meaning all
checkboxes. Here is a :checked example:
input[type="checkbox"]:checked {
}
This CSS rule selects all input fields which have a type attribute with
the value checkbox, and which are checked.
:enabled, :disabled
The :enabled and :disabled CSS pseudo classes selects HTML elements that
are either enabled or disabled. This will typically be input fields. Here is an example:
input:enabled {
border: 1px solid #6666ff;
}
input:disabled {
border: 1px solid #666666;
}
This examples sets a blue border color on all enabled input elements, and a gray
border on all disabled input fields.
Pseudo Elements
CSS pseudo elements are parts elements that can be styled, but which are not by themselves real HTML elements.
Pseudo elements are specified in the CSS selector using a double colon (::) and then the name
of the pseudo element. That syntax is new from CSS 3.0. Here is a CSS 3.0 pseudo element example:
p::first-letter {
font-size : 20px;
}
Before CSS 3.0 the standard was a single colon, like this:
p:first-letter {
font-size : 20px;
}
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.
::first-letter
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:
p::first-letter {
font-size: 20px;
}
This example sets the first letter inside all p elements to font size 20px.
::first-line
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.
Here is a :first-line pseudo element example:
p::first-line {
font-size: 19px;
}
This example sets the first line of all p elements to font size 19px.
::before, ::after
The :before and :after CSS pseudo elements matches a virtual first and last child of the selected HTML element.
This is normally used to insert some extra content (text or HTML) before or after that virtual last child using
the content CSS property. The content CSS property is used to generate
content and insert into the DOM via CSS. Here is an example:
<div id="#theId">
HTML Text
</div>
<style>
#theId::after {
content : " - Generated Content";
}
</style>
This example inserts the content defined in the content CSS property after the last child (last content)
of the element with the id theId (the div element.
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.
::selection
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.
Here is a ::selection CSS pseudo element example:
::selection {
background-color: #ff00ff;
}
This example sets the background-color of the selected text to purple.
| Tweet | |
Jakob Jenkov | |
