CSS SELECTORS

In CSS, we need to select certain elements of HTML, and for that, we use different types of selectors, these selectors let you select individual elements in HTML. If we want to style an anchor tag then we need to select that, if we need to style unorder list then we need to specify the selector in our CSS page. There are different types of selectors in CSS, so we are going to learn each of them.

1. Universal Selector(*):

Universal means all types of, so this selector can select all types of elements in the HTML page, it is used to select all elements of the HTML page. For example,

Example:

Here we are selecting all elements like h1, div, p, ul, and li and changing the background and color of these elements by using the universal selector.

output:

We changed the background color to black and the text color to yellow.

2. Element Selector

It is used to select only individual elements in from the webpage, if we only want to change the color of the h1 element then we can select that and use the style property of color.

3. CLASS AND ID:

These selectors select any element but we need to add class and id attributes in the tag, and then to style the selected class attribute we have to select by ".class" and for the id selector we have select by "#".

Note: ID select uniquely means we should include only one Id selector of the same name in the whole HTML page. but we can have many classes of the same name.

4. And Selector:

If we want to select an element that is in the other element then by selecting the parent one after that we can select that required element.

5. Combine Selector(Grouping Selector):

It is used to select multiple elements together so that we can add the same style properties to them.

6. Combinators:

When we want to select an element that is in the other element like we want to select span but it is in the div element.

7. Direct Child(>):

if there are so child elements inside an element but we want to select a particular child element then use this selector.

8. SIBLING COMBINATOR(+, ~):

If we want to select that element just after the first element and both these elements are children of the same parent element then we use a sibling combinator.

Example:

Here ul is a sibling of the p element and div is a common parent element of both children.

Pseudo-Elements in CSS

If we want to style a specific part of the selected element then we need to use pseudo-elements. Let's talk about ::before and ::after pseudo-elements in CSS.

1.) :: BEFORE

In CSS, ::before creates a pseudo-element that is the first child of the selected element. Use the content property to specify the content to insert. It is inline by default.

2.) :: AFTER

In CSS, ::before creates a pseudo-element that is the last child of the selected element. Use the content property to specify the content to insert. It is inline by default.

Example:

Here we can see that before and after the paragraph we got a red color block and we got this using the pseudo-element.