Basic Selectors

In CSS, selectors are patterns used to select the elements we want to style. Understanding selectors is fundamental to controlling the look and feel of our web pages. The most common selectors are element selectors, class selectors, and ID selectors. Additionally, we can group and combine selectors to apply styles efficiently.

Element selectors

An element selector targets HTML elements by their tag name. This means we can apply styles to all instances of a specific element on our page.

In this example, all <p> (paragraph) elements will have blue text. Element selectors are straightforward and useful when we want a consistent style for all elements of a particular type.

Class selectors

Class selectors allow us to target elements based on their class attribute. Classes are defined in our HTML elements using the class attribute and are prefixed with a dot . in CSS.

Here, any element with class="highlight" will have a yellow background. Class selectors are versatile because multiple elements can share the same class, and an element can have multiple classes.

ID selectors

ID selectors target elements based on their unique id attribute. In HTML, an id should be unique to a single element on a page. ID selectors are prefixed with a hash # in CSS.

In this case, the <h1> element with id="main-title" will have a font size of 36px . Use ID selectors when we need to style a specific element uniquely.

Grouping multiple selectors

Grouping selectors allows us to apply the same style to multiple selectors, reducing repetition in our CSS.

This rule sets the text color of all <h1>, <h2>, and <h3> elements to navy.

Combining multiple selectors

Combining selectors enables us to target elements more precisely.

• Descendant selector: Targets elements that are descendants of another element. The example given below sets the list style to square for <li> elements that are within an unordered list <ul>.

• Direct child selector: Selects elements that are direct children of a specified element. The example given below styles only <p> elements that are direct children of a <div>.

• Class within element selector: Selects specific target elements with a particular class. It combines the HTML tag name with a class name, ensuring that the styles apply only to elements of that tag type that also have the specified class. The example given below targets all <p> elements with the class highlight.

• Multiple classes: Target elements with multiple classes applied simultaneously to ensure styles are applied only when the element matches all specified classes. The example given below applies styles only to elements with both class="container" and class="highlight".

Specificity

Specificity is a measure of how specific a CSS selector is. Rules with higher specificity take precedence over those with lower specificity, regardless of their order in the stylesheet. CSS rules are applied based on specificity first and then precedence (the source of the styles).

Here is the specificity order from high to low for various CSS selectors:

1. Inline styles (style="...").

2. ID selectors (#id).

3. Class selectors, attributes, and pseudo-classes (.class, [attr=value], :hover).

4. Element selectors and pseudo-elements (h1, p, ::before).

5. Universal selector (*), combinators (+, >, ~), and negation pseudo-class (:not()) have no specificity.

Note: Specificity adds up for each selector in the combination. For example div.class has the specificity of both element selector and class selector.

Try it yourself

Below are sample HTML and CSS files to help you practice styling your web page using element selectors, class selectors, and ID selectors. Experiment with grouping and combining selectors to observe how they interact and influence the overall design. To begin with, try adding a lightgray background color with 5px padding to the footer element. Also, try increasing the font size of the word 'container' using the <span> tag.

Explanation

Let’s understand the selectors used in the above CSS code:

• Line 2: Targets all paragraph elements on the page.

• Line 8: Targets any element with the class highlight.

• Line 14: Targets the element with the ID unique-paragraph.

• Line 20: Targets all h1, h2, and h3 elements together.

• Line 26: Targets all p elements nested inside an element with class container.

• Line 32: Targets only p elements that are direct children of a section element.

• Line 37: Targets p elements that also have the class highlight.