CSS Selectors

CSS selectors are used to select HTML elements to apply a style to them. It is a rule that applies in CSS to match the HTML elements with its id, class, name, etc. You can easily select the specific elements to target for applying CSS styles.

It is the most important part of CSS to access the required HTML elements or parts that users want to style. There are many types of selectors you can use to select the required items.

Let’s find out with the examples given below.

Element Name Selectors

Element name selector selects the elements by their name to match in the web page. It can be the tag name of the element to access the element and apply the style to it. To select the element by its name, you have to use the name of the element.

The above example selects the paragraph element using its name p. It selects all the <p> elements contained in the web page where you specify the selector.

Id Selectors in CSS

Id is the unique part of the HTML elements that you can use to select the elements and apply the style. To select the element by its id, the element must have an id attribute. After that, you have to use the symbol hash(#) followed by the id of the element.

The above example shows the id of the element to select and apply CSS. It contains the prefix hash (#) that is required before the id of the element.

Class Selectors in CSS

The class is the attribute contains in the HTML element to style using the class selector. To select the element by its class, you have to use the symbol dot(.) followed by the class of the element to select.

The above example shows the class of the element to select with a dot(.) added before the class name. It applies CSS to all the elements that contain the same class value.

You can specify the selector to select the class with the specified element name. To select the element with the element name and the class value, you have to specify the element name followed by the dot(.) and the class name as given below:

The above examples show the selector with the element name and the class to select the required element that contains the specified class name.

Universal Selectors in CSS

The universal selector selects every single element on the web page. It is often used by the users on a web page to add universal margin and padding. The universal selector denoted by the asterisk(*) sign to select and specify.

The above example applies the font-size and color to all the elements of a web page.

Grouping Selectors in CSS

There may be possibilities that you may have to specify the same CSS rules for often times on a web page. This may increase the size of your CSS style file that you can reduce using the grouping selectors. You can group the elements in comma-separated element names and specify the rule only single time. This applies the same rules to all the specified elements using the grouping selectors.

The below example shows the same CSS rules to h1, h2, and h3. This may increase the size of the CSS style file by specifying the same rule multiple times.

You can reduce the size using the comma-separated element names as given below. The below example contains the CSS rule that applies to h1, h2, and h3 in a single specification.

Descendant Selectors in CSS

When you want to select the elements that is the descendant of another element, you can use this selector. The descendant selector selects all the elements that are the descendants of the specified elements.

Suppose, a div contains p elements that are the descendant. When you want to select only the p elements, you have to specify the CSS selector as given below.

Child Selectors (>)

Child selectors select the elements that are the direct child of the element. If you have a nested list of elements, the selector selects level 1 of the specified element.

To select the direct child elements, it uses the greater than (>) sign. The below example selects the p elements that are the direct child of the div element.

The above example selects all the direct <p> elements if the <div> element.

Adjacent Sibling Selectors (+)

Adjacent sibling selector selects elements that are directly after that specified element. The adjacent means the immediate sibling of the specified element. It selects the sibling elements if it shares the same parent element.

The below examples select the p element that is immediate comes after the div element.

The above example selects the <p> element that is immediately after the <div> element.

General Sibling Selectors (~)

The general sibling selectors select all the elements that are the siblings of the specified element. The below example selects all the p elements that are the siblings of the div element.