Introduction to CSS Selectors

A selector is a part of the CSS rule that selects/targets the HTML element to which the CSS rule is applied. The general syntax is:

selector_name {
    declaration_1;
    declaration_2;
    /* Other declarations */
}

There are different kinds of CSS selectors. A selector can be used to select (target) HTML elements by their name, in which case they are called element selectors, other selectors can represent CSS ID selectors or CSS class selectors, or they can be universal selectors.

Type selectors (element selectors)

The type selector, also referred to as an element selector, is a selector that has the same name as the HTML element it selects/targets and applies the CSS rule to. For example, if we want to create a CSS rule that targets all the h2 elements on our page, and applies the specified CSS rule to all of them, we write:

h2 {
    color: green;
    font-size: 22px;
}

This CSS rule begins with the h2 selector and introduces several declarations that affect the text color and the text size. This rule will select all the <h2> elements on the page and apply this CSS rule to all of them. Now, all our <h2> elements will be rendered as green text with a font size of 22 pixels.

If we wanted to target all the paragraphs on our page, we would declare a CSS rule that starts with a p selector. Example:

p {
    color: blue;
    font-size: 18px;
}

This CSS rule will select/target all the <p> elements on our page, and apply all the CSS declarations inside this CSS rule to those <p> elements. Now, all our paragraphs on a page will have a blue text with a font size of 18 pixels.

Note on the terminology: Strictly speaking, by a CSS rule, we mean the selector, the declaration block and the declarations inside the declaration block. In everyday speech, you will often hear that the individual declarations inside the declaration block are referred to as CSS rules themselves. By applying CSS rules, we often mean applying all the individual declarations inside a single CSS rule to an element.

ID selectors

The ID selector selects a single element whose id attribute has a given value. The CSS ID selector starts with a # symbol, followed by an ID value. The general syntax is:

#idvalue {
    declaration_1;
    declaration_2;
}

For example, if our HTML code had an element whose id attribute is set to some myid value:

<h2 id="myid">This is a h2 heading with a certain ID<h2>

Then, we would use the following CSS ID selector to target that element:

#myid {
    color: blue;
}

Now, only one <h2> HTML element whose id attribute is equal to myid will have its text rendered in blue color.

To target another element with a different id, for example, a paragraph that has a different ID as:

<p id="myparagraph">This is a paragraph with an id attribute.</p>

We would use the appropriate CSS ID selector in our CSS code:

#myparagraph {
    color: red;
}

Now, our single paragraph with an id of myparagraph will have its text styled as red text.

The ID selector names are case-sensitive, so the #myid and #MyID selector names would represent two distinct CSS selectors.

The ID value must be unique and used only once per page. HTML elements can only have a single id value per page, and there cannot be two HTML elements with the same id attribute value per page.

Class selectors

A CSS class selector is a selector that selects all elements with a given class name and applies the CSS rule to all of them. The class selector starts with a . symbol, followed by a class name. The general syntax is:

.class_name {
    declaration_1;
    declaration_2;
}

For example, if several HTML elements have the same class attribute value as in the following example:

<h2 class="myclass">This is an h2 element with the myclass class.</h2>
<p class="myclass">This is a paragraph element with the myclass class.</p>

Then, the following CSS rule that starts with a .myclass class selector will be applied to all of them:

.myclass {
    color: green;
}

Now, all HTML elements that share the myclass attribute value will have their text rendered in green.

We can have multiple HTML elements sharing the same class attribute value on the same page. The class selector name is case-sensitive, so .myclass and .MyClass would represent two distinct selectors and two different CSS rules.

We can apply multiple classes to the same HTML element by separating them with spaces. Example:

<h2 class="myclass other-class">This is an h2 element with two classes.</h2>

And in our stylesheet, we define both CSS class selectors/rules:

.myclass {
    color: green;
}

.other-class {
    font-size: 22px;
}

Now, both CSS rules will be applied to our h2 element, and it will be rendered as green text with a font size of 22 pixels.

Targeting specific elements

In our stylesheet, we can create a CSS class selector that targets a specific HTML element with a certain class. The CSS selector then starts with the element name, followed by a dot (.) and followed by the class name. The general syntax is:

element_name.class_name {
    declaration_1;
    declaration_2;
}

For example, if our HTML snippet has the following elements:

<h2 class="myclass">This is an h2 element with the myclass class.</h2>
<p class="other-class">This is a paragraph element with the other-class class.</p>

And we want to create a CSS selector that only targets <p> elements whose class is other-class, then in our stylesheet, we write:

p.other-class {
    color: red;
}

This selector will select all the <p class="other-class"> elements on our page and apply the CSS rule that colors the text in red to all of them.

If we want to target all the <h2> elements whose class is myclass on the page, our CSS selector would be:

h2.myclass {
    color: gray;
}

This CSS rule will target all the <h2 class="myclass"> HTML elements on the page and apply the gray text color to all of them.

A compound CSS selector name can be used to target an HTML element with multiple classes. Here, our CSS selector name starts with the first class name, followed by the second class name, and so on, with no spaces in between. The general syntax is:

.class_name_1.class_name_2 {
    declaration_1;
    declaration_2;
}

To target all the HTML elements that have two specific classes as in the following HTML snippet:

<div class="myclass other-class">This is an HTML element with two classes.</div>

Our CSS class style selector name should be:

.myclass.other-class {
    font-weight: bold;
}

If we have a mix of single-class elements and multi-class elements as in the following HTML snippet:

<div class="myclass">This is an HTML element with the myclass class.</div>
<div class="myclass other-class">This is an HTML element with two classes.</div>

We can create CSS class selectors that target elements with at least one class, and also those that target only elements with multiple classes. Example:

/* Targets all HTML elements that have at least the myclass class */
.myclass {
    color: green;
}

/* Targets all HTML elements that have at least the other-class class */
.other-class {
    font-size: 22px;
}

/* Targets all HTML elements that have both myclass and other-class classes */
.myclass.other-class {
    font-weight: bold;
}

Selector list

A selector list is a comma-separated list of individual selectors that targets all the HTML elements specified by individual selectors in the list, and applies the same CSS rule to all of them. The general syntax is:

selector_name_1, selector_name_2 {
    declaration_1;
    declaration_2;
}

A CSS rule that starts with a selector list will be applied to all the individual selectors in the list, all the HTML elements they target. For example, if we have the following HTML snippet:

<h2>This is an h2 element.</h2>
<p>This is a paragraph.</p>

And we want to apply the same CSS rule to both h2 and p elements, we can use a selector list, as shown in the following CSS snippet:

h2, p {
    color: green;
}

The green text rule will be applied to all the HTML elements specified in the selector list.

If our HTML elements have different classes, as in the following snippet:

<h2 class="myclass">This is an h2 element with a myclass class.</h2>
<p class="other-class">This is a paragraph element with an other-class class.</p>

If we want to target multiple different classes and apply the same CSS rule to all of them, we list them inside the selector list:

.myclass, .other-class {
    color: green;
}