Introduction

CSS selectors are the building blocks of CSS, the language that defines how HTML elements look on the web. CSS selectors allow you to target specific elements and apply styles to them. In this article, we will cover the basics of CSS selectors and how to use them effectively.

What are CSS selectors?

A CSS selector is a pattern that matches one or more HTML elements. For example, the selector p matches all <p> elements on the page, while the selector .red matches all elements that have the class attribute red.

There are different types of CSS selectors, depending on how they select elements. We can group them into five categories:

• Simple selectors: select elements based on their name, id, class, or attribute.

• Combinator selectors: select elements based on their relationship with other elements.

• Pseudo-class selectors: select elements based on their state or position.

• Pseudo-element selectors: select and style a part of an element.

• Attribute selectors: select elements based on their attribute or attribute value.

Use of Selectors

To use a CSS selector, you need to write a CSS rule that consists of two parts: a selector and a declaration block. The selector specifies which element(s) to style, and the declaration block contains one or more declarations that define the style properties and values. For example:

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

Copy

This rule applies to all <p> elements on the page, and sets their color to blue and their font size to 16px. You can use a comma (,) to separate multiple selectors in a rule, if you want to apply the same style to different elements. For example:

h1, h2, h3 {
  font-family: Arial;
  font-weight: bold;
}

Copy

This rule applies to all <h1>, <h2>, and <h3> elements on the page, and sets their font family to Arial and their font weight to bold.

How to write CSS selectors?

There are many ways to write CSS selectors, depending on what kind of elements you want to select. Here are some common examples of simple selectors:

• Element selector: selects all elements with a given node name. For example, div selects all <div> elements.

• Class selector: selects all elements with a given class attribute. For example, .center selects all elements that have class="center".

• ID selector: selects a unique element with a given id attribute. For example, #header selects the element that has id="header".

• Universal selector: selects all elements on the page. For example, * selects everything.

You can also combine simple selectors to create more specific selections. For example:

• Descendant selector: selects elements that are descendants of another element. For example, div p selects all <p> elements that are inside a <div> element.

• Child selector: selects elements that are direct children of another element. For example, ul > li selects all <li> elements that are nested directly inside a <ul> element.

• Sibling selector: selects elements that are siblings of another element, meaning they share the same parent. For example, h1 + p selects the first <p> element that immediately follows an <h1> element.

You can also use pseudo-classes and pseudo-elements to select elements based on their state or structural information. For example:

• Pseudo-class selector: selects elements based on their state or position. For example, a:hover selects all <a> elements when they are hovered over by the mouse cursor.

• Pseudo-element selector: selects and styles a part of an element. For example, p::first-line selects the first line of all <p> elements.