CSS selectors — the basics

In the post Starting simple CSS I left off with a basic CSS rule. Your formatting requirements will quickly require you to add to your CSS skills to achieve your design. To do this we need to understand the role of selectors a little better: think of CSS selectors as the “hooks” or “markers” that you use when applying CSS. The selectors identify where the CSS rules must be applied. They range from quite simple to quite complex!

In this post:

1. Simple
   1. Group
   2. id
   3. class
2. Combinations
   1. Child selector
   2. Adjacent sibling selector
   3. General sibling selector
3. Pseudo-classes
   1. :first-of-type
   2. :nth-child
4. Next steps

Required knowledge:

• Starting simple CSS

1. Simple

Any HTML element can be used as a selector. If you want all your paragraph text to be formatted in a specific way, then you can simply use p as your selector.

If you want to be more specific, you can use a class and/or an id. Multiple elements in a page can have the same class. Only one element of any kind on each page can have a specific id.

/* all paragraphs must be Arial font */

p {
    font-family: Arial;
}

/* all paragraphs with the class warning-text must have bold red text
   these paragraphs will also be in Arial font due to the previous rule which also applies */

p.warning-text {
    color: red;
    font-weight: bold;
}

/* all paragraphs with the id author-info should have a solid black border
   this paragraph will also be in Arial font due to the first rule which also applies
   but the color will NOT be red */

p#author-info {
    border: 1px solid black;
}

See the Pen CSS selectors – the basics by David Fox (@foxbeefly) on CodePen.

1.1 Group

You can group selectors in a short-hand kind of way by listing them as a comma-separated list:

/* all of your headings will be in red text */

h1, h2, h3, h4, h5, h6 {
    color: red;
}

1.2 id

If you have an element that is repeated on your page and you only want to style one specific instance of that element, use an id. If on any page you wanted to style the first paragraph as red, you could give it the id firstParagraph:

<h1>I am already important enough</h1>
<p id="firstParagraph">I am a special paragraph.</p>
<p>I am not a special paragraph.</p>

p {
    font-family: Arial;
}
p#firstParagraph {
    color: red;
}

The result is that all paragraph text will be in Arial font but only the first paragraph will have red text. The # (hashtag) in the CSS denotes the id attribute in the HTML.

1.3 class

If you have an element that is repeated on your page and you want to style more than one instance of that element, use a class.

<h1>I am already important enough</h1>
<p class="standoutParagraph">I am a special paragraph.</p>
<p>I am not a special paragraph.</p>
<p class="standoutParagraph">I am a special paragraph.</p>
<p>I am not a special paragraph.</p>

p {
    font-family: Arial;
}
p.standoutParagraph {
    color: red;
}

The result is that all paragraph text will be in Arial font but only the first and third paragraphs will have red text. The . (full stop) in the CSS denotes the class attribute in the HTML.

2. Combinations

We can “chain” selectors together in increasingly complex ways to create precise formatting rules, but which ultimately describe the relationships between the HTML elements. Think of it as describing a path to a target using HTML elements, their attributes and their position in the DOM.

2.1 Child selector

/* Selects the first <li> element that is a child of an <ol> element */

ol li {
    font-style: italic;
}

This makes more sense when used in a scenario such as the following:

/* Selects the first <p> element that is a sibling of an <article> element */

article + p {
    font-style: italic;
}

2.2 + Adjacent sibling selector

/* Selects the first <p> element that is a sibling of an <h1> element */

h1 + p {
    font-style: italic;
}

2.3 ~ General sibling selector

/* Selects any & all <p> element(s) that are siblings of an <h1> element */

h1 ~ p {
    font-style: italic;
}

3. Pseudo-classes

3.1 :first-of-type ^[2]

/* Selects the first instance of a paragraph in any article element */

article p:first-of-type {
    font-style: italic;
}

3.2 :nth-child

Head on over to the Zebra-striping table using CSS3 to learn about the :nth-child pseudo-class selector.

As usual, I direct you to the gurus at W3Schools.com for a comprehensive list: CSS Selectors

4. Next steps

See the Advanced CSS selectors tutorial.

References:

1. CSS Selector Reference (no date) CSS Selectors Reference. Available at: https://www.w3schools.com/cssref/css_selectors.php (Accessed: 16 November 2023).
2. MDN Web Docs, MozDevNet (no date) :first-of-type – CSS: Cascading Style Sheets. Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type (Accessed: 13 November 2024).