In the Article

CSS helps in styling our web page. We use different selectors to style different elements. In this article, we will talk about different types of CSS Selectors, namely, universal selector, individual selector, class and id selector, and selector, combined selector, selecting inside an element, direct child and sibling, and pseudo selectors.

The HTML document:

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum consequuntur modi provident voluptate voluptatem fuga quisquam esse. Facilis sit, cumque maxime provident veritatis necessitatibus adipisci perferendis laudantium culpa praesentium quaerat.</p>
<div>To do List:</div>
<ul><li>Learn Coding</li>
<li id="list1">Write codes</li>
<li class="list2 list2a">Ignore Lorem Ipsum</li>
<li class="list2">Buy protein
  <ul>
    <li>Chicken</li>
  </ul>
</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, possimus!</p>

Universal Selector

The Universal Selector in CSS is used to select all the elements in a HTML document. It also selects all the elements that are inside an element.

The whole of the document gets background-color of black and font-color white.

Individual Selector

If you want to style every element of that particular name use individual selector.

Notice how both the <p> tag has different style.

Class and ID selector

To select any element with its class name or id name we use ".className" or "#idName" respectively.

Elements with class name "list1" and id name "list2" has different background color.

and Selector(chained)

Let's say you want to select a tag with a particular class name or id name, we use and selector. and selector selects those elements for which every condition satisfies.

This select an <li> element which has "list2" and "list2a" as class name.

Combined selector

When we want two elements to have the same style, we use combined selector. To use combined selector, just use "," as the separator between the elements.

Both the <p> tag and the <div> tag get a background color of RGB value "#5784ac".

Inside an element

Let's say you want to select an element that is nested in an element or you want to select an element that is inside an element. We follow the order in which we can reach that particular element with leaving a space after each element.

Notice how the element that has a different color is an <li> element that is a child element of <ul> element that itself is a child of a <li> element that comes under an <ul> element.

Direct Child

To select direct child element of a tag we use > symbol. Let's understand this with an example.

In the HTML document, we can see <li> element directly comes directly under <ul> tag which means all <li> tags are the direct child element of <ul> tag which results in change in background color of all <li> tags.

Sibling selector

There are two types of sibling selector-

• General Sibling selector(~): It selects all the elements that are next siblings of specific element.
• Adjacent Sibling selector(+): It is used to select an element that is directly after another specific element. In the first example, only the <p> that is adjacent to the specific element, i.e, <div> gets selected. In the second one, both the <p> element gets selected.

Note: HTML document of this example is different than others.

Pseudo selectors

They are used when you want to define a special state of an element. When you want to change the style of an element when the mouse hovers over it or when an element gets focused on or something else. In that case we use pseudo selectors.

::before selector

The ::before selector inserts some content before the selected element.

We've used two pseudo selectors in this example. :hover changes the state of an element when we hover the mouse over the specified element. First, using the ::before selector, we change the state of <div> tag and put some content before it which is not written in the HTML document. But when we hover over <div> tag it changes its state and the result is shown according to the :hover selector.

::after selector

The ::after selector inserts some content after the selected element.

This is the same example as the ::before selector. The difference is the colored content is put after the <div> element and so does the hover state style.