Selector (CSS)

A selector in CSS (Cascading Style Sheets) is a pattern that selects one or more HTML elements to apply a style to. CSS selectors are used to define the styling rules for an HTML document, allowing developers to control the visual appearance of a website.

Selector Basics

CSS selectors are comprised of one or more patterns that match against specific elements in an HTML document. When a selector matches an element, it applies the styles defined within the selector to that element. The basic syntax of a CSS selector is as follows:

selector {
    property: value;
}

In this example, selector is the name of the selector, and property and value represent the CSS property and value to be applied to the selected element. A selector can contain one or more properties, each separated by a semicolon.

Types of Selectors

There are many types of selectors in CSS, each with their own syntax and pattern matching rules. Some of the most common types of selectors include:

Element Selectors

Element selectors match all instances of a particular HTML element. For example, the following selector matches all h1 elements in the HTML document:

h1 {
    color: red;
}

This selector applies the color red to all h1 elements in the document.

Class Selectors

Class selectors match all elements with a particular class attribute. For example, the following selector matches all elements with the class my-class:

.my-class {
    color: blue;
}

This selector applies the color blue to all elements with the class my-class.

ID Selectors

ID selectors match a single element with a particular ID attribute. For example, the following selector matches the element with the ID my-id:

#my-id {
    color: green;
}

This selector applies the color green to the element with the ID my-id.

Attribute Selectors

Attribute selectors match elements with a particular attribute or attribute value. For example, the following selector matches all input elements with the attribute type="text":

input[type="text"] {
    border: 1px solid black;
}

This selector applies a black border to all input elements with the attribute type="text".

Combinators

Combinators are used to combine multiple selectors into a more complex pattern. There are four types of combinators in CSS:

• Descendant Combinator (): Matches all elements that are descendants of the first element.
• Child Combinator (>): Matches all direct children of the first element.
• Adjacent Sibling Combinator (+): Matches the first element that is immediately followed by the second element.
• General Sibling Combinator (~): Matches all elements that are siblings of the first element.

For example, the following selector matches all p elements that are descendants of a div element:

div p {
    font-size: 18px;
}

This selector applies a font size of 18px to all p elements that are descendants of a div element.

Selector Specificity

When multiple selectors match the same element, the CSS rules that apply to that element are determined by selector specificity. Selector specificity is a measure of how specific a selector is, and is determined by the number of ID, class, and element selectors used in the selector.

For example, the selector #my-id .my-class p is more specific than the selector .my-class p, because it contains an ID selector in addition to class and element selectors.

If two selectors have the same specificity, the last selector defined in the stylesheet will take precedence.