CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply.

They are used to select the content you want to style. Selectors are the part of CSS ruleset. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

There are five types of selectors, they are:

1. CSS Universal Selector
2. CSS Element Selector
3. CSS Class Selector
4. CSS ID Selector
5. CSS Group Selector

1. Universal selector

It selects all elements on the pages. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: *
Example: * will match all the elements of the document.

2. Element selector

It selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.

3. Class selector

It selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of “index”.

4. ID selector

It selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID “toc”.

5. Group selector

The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimizing the code. Commas are used to separate each selector in a grouping.Syntax: elementname, elementname, elementname Example: h1, h2, p will match all elements that have the h1, h2, p element name. (to any value).