The most straightforward way to select HTML is to directly reference an element by its name. Any element can be selected this way, and the CSS styles are applied to all instances of that element.
For instance, in the following example the CSS selects for the
p (paragraph) element, and the color style written within the selector block is applied to all paragraphs on the page:
Sometimes, you don't want to select all the instances of a particular element, but would instead like to select just one or just a few specific instances. In this case, the class selector can be used.
As discussed in the chapter about IDs and Classes in HTML, classes are custom names that can be applied to one or more HTML elements using an attribute. So an element written like
<h3 class="special-heading">Heading Text</h3> represents a third-level heading with a class name of special-heading.
Classes can be selected in CSS by writing a period (.) followed by the name of the class. So for the example in the previous paragraph, you can select the class in CSS by writing
.special-heading. Note that it isn't necessary to write the name of the element at all.
In the following example, only the second paragraph has the class selected in the CSS, so only it receives the text color.
HTML is structured into a series of nested elements, and we use the terminology of a family tree (such as parent, child, sibling, decendant, et cetera) to refer to this structure. Sometimes in CSS, it is necessary to write selectors that reference these relationships. The decendant combinator selects for an element that is a child, grandchild, or further decendant of one or more specific selectors.
Decendant combinators are written as a space-separated series of selectors, parent first. For instance,
div h2 selects for any
h2 element that is a decendant of (nested within) a
div element, whether as a direct child or as a great-great-great-grandchild.
In decendant combinators that select for deep nesting it is not necessary to include intermediate elements from the family tree. For instance, if selecting for a
span nested within a
li nested within a
ul, you could write
ul li span, but it would be simpler to write
ul span and skip the
li unless there is some reason to be extra specific.
Another important thing to know is that any type of selector can be used as part of a decendant relationship. For instance, you could use a class as the parent and an element as the decendant:
.product-item h3, which selects for any
h3 that is a decendant of an element with a class of
In this example, there are two decendant combinators: one that selects for a direct child, and one that selects for a grandchild. Be sure to check the HTML view to see the structure of the elements.
Sometimes you want to apply the same CSS styles to several different elements at once. You could of course write the same styles multiple times in different selector blocks, but a selector list makes it possible to write those styles only once by allowing you to select for multiple elements at a time.
Selector lists are written by comma-separating each individual selector. For instance,
h1, h2, h3 selects for every
h3. Any type of selector or combinator may be used in a selector list and it is okay to mix selector types. For example,
blockquote, .featured-paragraph selects for all
blockquote elements and all elements with a class of
When selecting lists that include the decendant combinator or other combinators, it is important to know that each comma completely resets the selector.
section h2, p does not select for paragraphs inside a section. It selects for all
h2 elements inside a
section element and all
p elements everywhere. To select for all
h2 elements inside a
section and all
p elements inside a
section, you would need to write
section h2, section p.
Here are some examples of selector lists. Be sure to check the HTML tab to see the structure of the elements.
In addition to classes and Ids, HTML elements can have many other attributes (such as
href for links or
required for form fields) to apply extra meaning or functionality, and sometimes it is helpful to select for those attributes in CSS directly. To write the selector, the attribute is indicated within square brackets (
). For instance, a form field element with the
required attribute could be selected using
For attributes that include a value, the square brackets can include the value in quotes after an equals sign, just like how the selector is written in the HTML tag. So for an HTML element like
<input type="email">, the CSS selector would be written
Take a look at the following examples of attribute selectors. Be sure to check the HTML tab to see where and how the attributes are applied to the elements.
A number of other selectors and combinators provide greater levels of control for more niche use cases. The following table explains and gives brief examples of several of these.
|Universal Selector||Using an asterisk character targets every element on a page. Take care when using this selector.||
Targets every single element on the page.
|Direct Child Combinator||Matches an element that is a direct child of another.||
|General Sibling Combinator||Matches an element that is a sibling following another.||
|Adjacent Sibling Combinator||Matches an element that is the next sibling of another.||
Targets the first
|Pseudo-classes||A set of special modifiers for advanced selections. A full list can be found on MDN.||
Targets any link over which the user is hovering the cursor.
|ID Selector||Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol. While they are shown here for reference, it's best not to use IDs for CSS at all.||
Targets the element whose id attribute has a value of introduction.