JavaScript Tutorial

CSS Selector

A CSS selector is a pattern used to target elements on a web page. The associated style rules are applied to elements that match the selector pattern, allowing for targeted styling.

Selectors are a crucial aspect of CSS as they enable us to select specific elements on a web page and apply styles to them in various ways.

Universal Selector

The universal selector, denoted by an asterisk (*), matches every element on the page.

The universal selector is often used to remove default margins and paddings from elements, allowing custom margins and padding to be applied. However, it is recommended to use element type or class selectors instead, as the universal selector can put unnecessary pressure on browsers by matching every element on the page.

 

Element Type Selector

An element type selector matches all instances of a specific element type in the document.

In the example above, the element type selector targets the "p" elements and assigns a color value to them. The style rules inside the "p" selector will be applied to every "p" element in the document, regardless of their position in the document tree, making the text color black (#333333).

Id Selector

This selector is used to define style rules for a single or unique element. The id selector is defined with a hash sign (#) immediately followed by the id value.

 

This style rule renders the text of an element in black #333, whose id attribute is set to error.

Note:- The value of an id attribute must be unique within a given document — meaning no two elements in your HTML document can share the same id value. If they share the same id, duplicacy will occur.

Class Selector

These selectors can be used to select any HTML element that has a class attribute. All the elements having that class will be formatted according to the defined rule. We can have multiple elements with the same class name. The class selector is defined with a period sign (.) immediately followed by the class value.

The above style rules render the text in the blue of every element in the document that has a class attribute set to blue. You can make it a bit more particular. For example:

The style rule inside the selector p.blue renders the text in the blue of only those <p> elements that have the class attribute set to blue and has no effect on other paragraphs.

Descendant Selector

When we need to select an element that is the descendant of another element. For example, if we want to target only those anchors that are contained within an unordered list, rather than targeting all anchor elements.

 

The style rules inside the selector(p a) applied to only those <a> elements that are contained inside an <p> element, and have no effect on other links inside the document. Similarly, the style rules inside the p strong selector will be applied to only those <strong> elements that are contained inside the <p> element and have no effect on other <strong> elements.

Child Selector

The child selector is used to select elements that are direct children of a specific element.

A child selector is made up of two or more selectors separated by a greater than symbol (>). It is useful for selecting only the first level of list elements inside a nested list with multiple levels.

The style rule inside the "ol > li" selector in the example above is applied only to "li" elements that are direct children of "ol" elements and has no effect on other list elements.

Adjacent Sibling Selector

The adjacent sibling selector is used to select sibling elements (i.e., elements at the same level) where one element immediately follows another.

The selector "p + h6" will select the <h6> elements only if both the <p> and <h6> elements share the same parent in the document tree and the <p> element immediately precedes the <h6> element. This means only paragraphs that come immediately after each <p> will have the associated style rules. The selector "p.paragraph + h6" will select all <p> tags with the class 'paragraph' that have an adjacent h6 element. The color #999999 is applied to these elements.

General Sibling Selector

This selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (∼) character.

It can be written like E1 ∼ E2, where E2 is the target of the selector.

The selector p ∼ h6 will select all the <h6> elements that are preceded by the <p> element, where all the elements share the same parent in the document tree.

 

Grouping Selector

Often, several selectors in a style sheet share the same style rule declarations. We can group them into a comma-separated list to minimize code repetition and make the style sheet more concise.

In the example above, we are grouping elements that share the same styling, such as p, h1, and h6. All three of them have the same color property applied by making them comma-separated in the selector.

Go back to Previous Course