CSS Selectors

A CSS selector helps you choose the HTML element that you wish to style. The style rules related with a specific selector will be applied to the elements that resemble the pattern of the selector.

CSS selectors can be classified as follows:

• Simple selectors (choose elements depending on id, name,  and class)
• Combinator selectors (choose elements depending on a specific relationship between them)
• Pseudo-class selectors (choose elements depending on a specific state)
• Pseudo-elements selectors (choose and style a part of an element)
• Attribute selectors (choose elements depending on an attribute or attribute value)

CSS element Selector: It chooses the HTML elements depending on the element name.

Example

h1 {
text-align: right;
color: yellow;
}

All the <h1> elements on the webpage will be aligned to the right in yellow text color.

CSS id Selector: It chooses an HTML element depending on the id attribute.  The element id remains unique in a webpage, thus one id selector can choose one element only.

Use a hash symbol (#), followed by the element id to choose an element.

Example

#para1 {
text-align: right;
color: blue;
}

Tip: Don't use numbers as ID names.

CSS class Selector: It chooses an HTML element depending on the class attribute.  Use a period (.), followed by a class name to choose an element.

Example

.center {
text-align: right;
color: blue;
}

Tip: Don’t use numbers as class names.

CSS Universal Selector: If you want to choose all the HTML elements on a web page, use the universal selector (*).

Example

* {
text-align: right;
color: blue;
}

CSS Grouping Selector: It helps you choose HTML elements that have similar style definitions.

Let’s see the example below carefully:

h1 {
text-align: right;
color: blue;
}

h2 {
text-align: right;
color: blue;
}

p {
text-align: right;
color: blue;
}

The h1, h2, and p elements have similar style definitions. Grouping the selectors, helps you reduce the code. Use a comma to distinguish each selector when you want to group selectors.

h1, h2, p {
text-align: center;
color: red;
}

CSS Descendant Selectors: It helps you choose elements that are descendants of other elements.

Example:

ul.menu li a {
text-decoration: none;
}

h2 em {
color: blue;
}

Here, the styling rules mentioned in the ul.menu li will be applied to <a> elements present in the <ul> element within class .menu. They will not impact other links in the document.

The style rules mentioned in the h2 em selector will be applied to <em> elements present in the <h2> element and will not impact other <em> elements.

Child Selector: A child selector helps you select elements that beat direct relationships/children of other elements.

Use a greater than (<) symbol to separate selectors when creating a child selector.

Example

ul < li {
list-style: disc;
}

ul < li ol {
list-style: none;
}

The style rules mentioned in the ul < li will be applied to <li> elements that are direct children of <ul> elements and will not impact other list elements.