What are Css Selectors ?

The Css selectors simply means the way using which we select/target the html elements in the html file and style them using css as required. Its all about finding the element in html and style it. There are variety of css selectors , lets understand some of the important selectors.

Universal Selector

This selector is denoted by asterisk (*) symbol . It is used to style all the elements in html. It also targets elements which are inside other elements also

Individual Selector or Element Selector

The Element Selector selects the html elements using its tag. eg: we can target all p, h1, h2, span, div, etc.

Class Selector and Id Selector

The Class Selector targets elements based on their class attribute, similarly id selector targets elements based on id attribute. we can write it in css file by using dot(for class) and using #(for id ) followed by class name of element as shown in code below

And Selector or Chained Selector

In this type we can combine multiple selectors such as tag, class, id. This selector targets all elements which follow that combination.

in the above example h1.orange_color selector will target all h1's that have "orange_color" class.

Combined Selector

if different types of elements have same styling , then we can easily target those using combine selectors. In this , we can combine classes, id, tags, etc

in the above example, it is targeting all spans and li's.

Inside an Element / Element Element Selector

It is a combination of multiple selectors and is used to select element inside an element.

here elements matched by last selectors are targeted only if they have parent (direct or ancestors) matching with first selector.

in this example , only li's that falls under section and then div are targeted.

Direct Child Selector

It is used by combining multiple selector using > (child combinator). eg - parent_tag > child_tag here it will target only those child_tags that have parent_tag as a direct parent. Lets see code for more information

%[codepen.io/yashashri18/pen/mdKgKdO] in this example it is targeting only those p which have div as direct parent.

Sibling Selector

This selector is used to target element which is present direct after the specific selected element. Lets understand by code.

in this example , it is targeting only those p which are directly after div.

Pseudo Selectors

Pseudo Selectors are used to style certain part of the element. Before and After are the pseudo elements which we use often. we can insert content before or after the element.

The syntax to write pseudo classes is like below -

p::before {
  content: "Before Content ";
}
p::before {
  content: "After Content ";
}

Lets under by exmaple - %[codepen.io/yashashri18/pen/PoagVyR]

in this example we are adding the content before and after the p element.

This articles ends here. I have tried to explain the most usable css selectors in easy ways. Please comment for any suggestions, improvement or feedbacks. Happy Learning....!! Thank you.