What are CSS selectors?

selector defines the pattern to select HTML elements to style those selected elements. there are different types of selectors in CSS mentioned below.

• Universal selector
• Type selector
• Class selector
• ID selector
• Attribute selector
• Selector list
• Descendant combinator selector
• Child combinator selector
• General sibling combinator selector
• Adjacent sibling combinator selector
• Pseudo-classes selector
• Pseudo-elements selector

Here you will understand each selector in detail with examples.

I have created one .html file which we are going to use throughout this article we are going to write all CSS inside that Html file only.

HTML code without CSS

webpage preview without CSS

Universal Selector

Selects all elements. In this example, I have selected elements with *(asterisk) selector and given font-weight: bolder;

CSS Code:

webpage preview:

Type Selector

Selects all elements that have the given node name. In this example, I have selected the li element with elementname(li) and given color: red;

CSS Code:

webpage preview:

Class Selector

Selects all elements that have the given class attribute. In this example, I have selected the div element with the class attribute of div-2 and given background-color: red;

CSS Code:

webpage preview:

ID selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. In this example, I have selected the span element with the id attribute and given background-color: red;

CSS Code:

webpage preview:

Attribute selector

Selects all elements that have the given attribute. In this example, I have selected the li element with the attribute of data-number and given background-color: red;

CSS Code:

webpage preview:

Selector list

So far we can use only one selector to apply CSS on that by using the selector list you apply the same property to the different selectors. In this example, I have selected the li element with the attribute of data-number and the div element with the class of div-2 given background-color: red;

CSS Code:

webpage preview:

Descendant combinator selector

The " " (space) combinator selects nodes that are descendants of the first element. In this example, I have selected all li's elements which is a descendant of ul of class ul-1 and given background-color: red;

CSS Code:

webpage preview:

Child combinator selector

The > combinator selects nodes that are direct children of the first element. In this example, I have selected all li's elements which are direct children of ul of class ul-1, and given color: red;

CSS Code:

webpage preview:

General sibling combinator selector

The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. In this example, I have selected all sibling elements which share same parent as first element, and given color: red;

CSS Code:

webpage preview:

Adjacent sibling combinator selector

The + combinator matches the second element only if it immediately follows the first element. In this example, I have selected sibling elements that is the first sibling if first element, and given color: red;

CSS Code:

webpage preview:

Pseudo-classes selector

The : pseudo allows the selection of elements based on state information that is not contained in the document tree.

Example 1: a:visited will match all tags that have been visited by the user. Example 2: a:hover will match tags if the user mouse over on that a tag.

All Pseudo-classes in Alphabetical order:

• :active
• :any-link
• :autofill
• :blank
• :checked
• :current
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :future
• :focus
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :last-of-type
• :link
• :local-link
• :modal
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :picture-in-picture
• :placeholder-shown
• :paused
• :playing
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :state()
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Pseudo-elements selector

The :: pseudo represents entities that are not included in HTML.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

All Pseudo-elements in Alphabetical order:

• ::after
• ::backdrop
• ::before
• ::cue
• ::cue-region
• ::first-letter
• ::first-line
• ::file-selector-button
• ::grammar-error
• ::marker
• ::part()
• ::placeholder
• ::selection
• ::slotted()
• ::spelling-error
• ::target-text