CSS Selectors

Element Selector

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:

Class Selector

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.

Decendant Combinator

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 product-item.

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.

Selector List

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 h1, h2, and 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 featured-paragraph.

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.

Attribute Selector

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 [required].

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 [type="email"].

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.

Advanced Selectors

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.

Practice Exercise