CSS3 Selectors

March, 2023

Anatomy of a CSS Rule

A CSS rule has two main parts: the selector and declaration. The basic format is
selector: declaration

The selector is that which identifies the thing to change, while the declaration is the section being changed. The declaration contains a property and value. Property is the item being changed, while the value is the new value of the property.

Consider the CSS rule p {color: green};. The selector is p (paragraph), while the declaration is color: green. Color is the property, and green is the value.

Types of Selectors

There are many types of selectors. The three most basic include:

• HTML element
• Class
• Id

Note that using an HTML element as a selector will alter all instances of that element. Class and ID avoid this issue. Specific classes can be used multiple times per page; ID must be unique. Recall that, in CSS, class names begin with a . while id names begin with #.

There are other types of selectors.

• CSS Attribute Selectors
• CSS Substring Matching Attribute Selectors
• Pseudo-elements
• Dynamic Pseudo-classes
• Structural Pseudo-classes
• UI Element States Pseudo-classes
• Combinator Selectors

CSS Attribute Selectors

The attribute selectors allow the designer to select HTML elements with specific values.

The following example will place a green border around every image that has an alt attribute.

HTML <img src="image.jpg" alt="image">

CSS img[alt] {border: thick solid green};

Specific values may also be selected.

HTML <img src="image.jpg" alt="wow">

CSS img[alt="wow"] {border: thick solid green};

Missing values can be targeted using the :not() selector. The following example will target any image with an empty alt attribute.

HTML <img src="image.jpg">

CSS img:not([alt]) {border: thick solid red};

Substring Matching Attribute Selectors

The substring matching attribute selectors act like wildcards and allow the designer to select elements based on partial attribute value matches.

The designer can specify the location within the value to be matched.

• ^ = begin
• * = contain
• $ = end

Example

HTML

<p class=”mybigpicture”>text</p>
        <p class=”mystuff”>text</p>
        <p class=”picture”>text</p>
        

CSS

The following CSS will apply a border to any paragraph with a class where the class name begins with the letters my.

p[class^="my"] {border: thick solid black;}

Alternatively, the following CSS will apply a border to any paragraph with a class name containing the letters picture in any location.

p[class*="picture"] {border: thick solid black;}

Using the $ allows the designer to select only paragraphs where the class name ends with the letters picture.

p[class$="picture"] {border: thick solid black;}

These may be chained together as needed.

Pseudo-elements

The pseudo-elements create elements that were not there before.

Note the use of ::. This distinguishes pseudo-elements from pseudo-classes; however, : is valid in either case.

• ::before
• ::after
• ::first-letter
• ::first-line

In practice this allows the designer to add some interesting effects. For example, consider the following example.

p::first-letter {font-size: 2em; font-weight: 400;}

This will apply formatting to the first letter of every paragraph.

The pseudo-elements can also be used to add content to the page. The following CSS will add the characters within the quotation marks to the end of every paragraph.

p::after {
            content: "  --Dr. Foltz" ;
        }
        

By combining the ::after pseudo-element with an attribute selector, the designer can automatically add the file type to any hyperlinked document. The following snippet applies only to .pdf files.

a[href$=".pdf"]::after {
            content: " (pdf)";
            font-size:  .8em;
            color: red;
        }
        

Pseudo Classes

A pseudo-class, or pseudo-selector, is used to select an element in a specific state.

Dynamic Pseudo-Classes

Commonly used with menus and hyperlinks, these include:

• :link
• :visited
• :hover
• :active
• :focus

UI Element State Pseudo-Classes

The element state pseudo classes are typically used with forms. The element state pseudo-classes include

• :enabled
• :disabled
• :checked

Structural Pseudo-Classes

These pseudo-classes are used to select elements based upon position within the DOM or document object model.

• :first-child selects the first item in the collection
• :nth-child(n) selects an item based on formula or key (such as odd or even)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)
• :last-child selects the last item in the collection
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty selects empty items (such as an image containing alt="").

Example

The :last-of-type structural pseudo-class can be used to select the final element of an unordered list used as a menu.

CSS

.menu li:last-of-type {text-align: right;}

Other Pseudo-Classes

• :not(x)
• :target
• :lang(language)

The :target pseudo-class is incredibly helpful in designing menus; the :lang pseudo-class should be familiar from creating HTML templates.

Negation :Not Pseudo-Class Selector

This selects all items that are “not” something. The following CSS selects all elements other than H1 elements.

:not(h1) {color: yellow;}

Combinator Selectors

These select items based on relative position.

• Descendant Selector
• > Child Selector
• + Adjacent Sibling Selector
• ~ General Sibling Selector

These select either an item that is a descendant of another element (child selector), an element next to an element that is a descendant, or every subsequent sibling.

Assumption: understand that .parent .child picks any element that is a descendant of .parent and has a class of .child.

Descendant Selector

This selects all elements that are descendants of a specified element. In this example, all H1s appearing within header would be selected.

Example

CSS

header h1 {
            background-color: white;
            color: black;
            border-radius: 0px;
            padding: 0;
        }
        

Child Selector

This selects all elements that are children of a specified element.

Note the use of >.

This could be compared to a descendant selector!

Example

CSS

header > h1 {
            background-color: white;
            color: black;
            border-radius: 0px;
            padding: 0;
        }
        

Adjacent Sibling Selector

This selects an element that is directly after another element. Adjacent sibling elements must have the same containing element.

Note the use of +.

Example

HTML

<div class="item">1</div>
        <div class="item next">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        

CSS

.item {
            display: inline-block;
            height: 2rem;
            width: 2rem;
            background-color: blue;
            color: white;
            border: thin solid black;
        }
        .next + .item {
            background-color: orange;
        }
        

This CSS will select the sibling to item 2 because item 2 has a class of next.

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

Note the use of ~.

Example

CSS

.next ~ .item {
            background-color: yellow;
        }
        

The Empty :Empty Selector

The Empty selector is used to select empty elements.

HTML

<div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
            <section>4</section>
            <section>5</section>
            <section></section>
        </div>
        

CSS

div > section:empty {display: none;}

This will cause the final section element to not be displayed.

Other

A group of selectors can be altered at the same time by providing a comma-separated list.

CSS

nav a:link, a:visited {
            color: blue;
            background-color: white;
            }
        
        nav a:focus, a:hover, a:active {
            color: white;
            background-color: blue;
            }
        

Cheat Sheets

Selector Cheat Sheet

Tutorial and Link to Another Cheat Sheet

Yet Another