CSS Selector - Learn in the simplest way

What is CSS selector?

CSS Selector is used to select any HTML element(s) such that you can style it.

The syntax of CSS is selector {property:value}.

To start with the CSS, it's necessary to select the correct element, to put styling on. In this blog, all the necessary Selectors are described.

CSS provides the following Selectors -

  • universal selector

  • individual selector

  • class and id selector

  • and selector (chained)

  • combined selector

  • inside an element

  • direct child

  • sibling ~ or +

  • attribute selector

Universal Selector *

Universal Selector is used to select all the HTML element of the webpage. The properties defined under the universal selector is applied to all of the elements.

* { box-sizing: border-box; margin: 0; }

In the example, all html elements are selected and their box-sizing is made to border-box and the margin is to 0.

Individual Selector <element name>

Individual Selector is used to select a particular element of the webpage. The properties defined under the universal selector is applied to all of that elements.

p { font-size: 2rem; } Here the font size of every p tag becomes 2rem.

Class and Id Selector

Classes and Id are HTML attributes. Usually a class is defined on multiple element but id is defined for a particular element.

.<class name> { display: flex; }

A dot(.) symbol is used to select a element through the class whereas a pound symbol (#) is used to select a element through the id.

#<id name> { display: flex; }

And Selector (chained)

In HTML, any element can have multiple class name. A dot(.) symbol is used to chain multiple class selector.

<h3 class="class1 class2">Heading</h3>

.class1.class2{}

In the example, all the <h3> are selected having both class1 and class2 as its class.

Combined Selector (,)

Multiple CSS Selectors can be combined by separating them by comma(,).

h3,p { font-size: 2rem;} Here the font size property is applied to both <h3> and <p> element.

Inside an element Selector

To select a element inside a parent element, that element and parent elements are seperated by <space>.

div p { font-size: 2rem;} Here all the <p> elements inside a <div> are selected regardless of the further nesting of the <p> element.

Direct child Selector (>)

To select a child element inside a parent element, child and parent elements are seperated by > symbol.

div>p { font-size: 2rem;} Here all the <p> element that are direct child of the <div> are selected. The > selector ignores the grandchild element and the further hirerchy.

Sibling Selector (~ and +)

To select a sibling element ~ or + symbol is used.

+ symbol is used to select first sibling whereas ~ is used to select all the siblings.

<h2 class="sibling">I am selected</h2> <h2>I am the bigger sibling</h2> <h2>I am the smaller sibling</h2>

.sibling + h2 { border: 1px solid red; }

Here the first <h2> element is selected only.

.sibling ~ h2 { border: 1px solid red; }

Here all the <h2> element are selected.

Note - in the above example all the <h2> elements are selected except the one with class="sibling". And this is the way the sibling selector works. The same applies with + symbol too.

Attribute Selector

[attribute="value"] selector is used to select a element with a specified attribute.

img [alt="logo"] {} Here all the <img> elements having alt="logo" are selected.

Conclusion

I hope all the basic CSS selectors are discussed above and the code snippets also helped you in understanding the CSS selectors.