CSS Selectors

CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply. CSS selectors are used to “find” (or select) the HTML elements you want to style.

Universal selector (*)

It selects all elements on a web page.

* {}

Type Selector (Element Name)

It selects specific HTML element.

div {}

Class Selector (.)

It selects elements with the same class name.

.className {}

ID Selector (#)

It selects elements with the same ID name.

#idName {}

Selector List (,)

This selector is a grouping method that selects all the matching nodes.

p, div, span {}

Descendant combinator (space)

div p {}

It will select any “p” inside “div”, even if there are other elements between them.

Child combinator (>)

It selects nodes that are direct children of the first element.

p > span {}

Adjacent sibling combinator

It matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {}

There are many more CSS Selectors but you don’t need to know it all. We use only particular selectors in daily use.

Instructor ~ TARUN KUMAR

LAZY SYNTAX