Everything about css selectors

What is css selector?

Suppose you wrote a CSS code. Now how you will apply this CSS on HTML tags? To apply we use selector.

Types of selectors:

Simple selectors

By tag name:
Suppose we used p, h2, div tag on the html page.Now we want to apply a different text color and background-color on the tags.
to do that we will write:

p{
    color:red;
    background-color:green;
}

div{
    color:red;
    background-color:green;
}

h2{
    color:red;
    background-color:green;
}

But remember one thing, suppose we used p tag as a selector then all the p tags will get the same CSS. If we have 5 p tags then 5 p tags will get the same CSS.

class:
Suppose we want to apply CSS on a tag using the class selector. Then we write .class_name{}. Inside the bracket, we will write the CSS. Now to use that CSS we have to write class="" inside that tag opening tag where we want to use this CSS. Inside the double quotation write the class name.

In simple selectors, We can not give space between class names. We can use a hyphen or underscore as a separator.

We can use a class name as many times as we want on a HTML page. In the example, we have a p and h2 tag. Now we want to apply the same CSS on the both p tag and different css on h2 tag. So we wrote the same class name inside the opening tag of both p tags and different css name in the h2 tag.

id:
Suppose we want to apply CSS on a tag using an id selector. Then we will write #id_name{}. Inside the bracket, we will write the CSS code. Now to use that CSS we have to write id="" inside that tag opening tag where we want to use this class. Inside the double quotation, we will write the id name.

We can give space between 'id name. We can use a hyphen or underscore.

We can use an id name one time on a HTML page.

Difference between id and class:
Id and class are quite similar but the main difference is each id can be used only one time on a HTML page and a class can be used multiple times. Id tag is mostly used on the unique parts to identify the unique parts.

Universal Selector

The universal selector is the asterisk sign(*). This selector selects all the HTML elements present in the HTML file.

Grouping Selector

Here you make a group of those classes, ids, or tags on which you want to apply the same CSS.

Suppose you want to apply the same CSS on h2 and h3 tags, i1 and i2 id, and c1 and c2 class.
Let's see the example code:

Combinators selectors

Here we can make a combination of tags, classes, and IDs to create a selector.
Suppose we have a first_div class. We are using this class in a div tag. Now inside the div tag, we have a p tag. Now we want to write CSS code for the p tag.
To do that we can write:

Suppose we have a p tag. Now inside that p tag we have a span tag and we want to write css for that span tag.
To do that we can write:

Suppose we have a div tag. Inside the div tag we have a p tag and inside that p tag we have a span tag and we want to write css for that span tag.
To do that we can write:

What is child and parent in CSS?

Suppose we have a div and inside that div, we have 10 p tags. Here div is the parent of those 10 p tags and those 10 p tags are the child of the div tag. Here first p tag is the first child and the last p tag is the last child. The fifth element is the fifth child and 8th element is the 8th child.

Suppose inside of a div tag we have four p tags in this case those four p tags are direct child of the div tag. Now there are list inside each p tags. These p tags are the direct child of the div tag and the lists are indirect child of the div tag.

child selector (>)
This selector selects all elements that are the children of a specified element. Here all the elements must be the the direct child.
Suppose inside of a div tag we have four p tags in this case those four p tags are the direct child of the div tag. To select these p tags use this selector.

adjacent sibling selector (+)
This selector selects an adjacent element that is directly after a specific element.
Suppose we have so many div tags and so many p tags on the web page. But only 2 two times after the div tag we have a p tag. Now if we want to select those p tags which are after the div tag then we will use this selector.

We will write: div + p{}
It means select those p tags which are after the div tag.

general sibling selector (~)
This selector selects all elements that are next siblings of the specified element.

Attribute selector

What is attribute selector?

We learned about attributes in HTML like color, height, width, border, cellpadding, cellspacing, name, value, d, type, etc. In the attribute selector, we target an element according to the attribute present in the opening tag.

Suppose you have two images. In one image you used the alt attribute and in the other, you didn't. Now you want to change the height of that image that has the alt attribute. In this case, you will use an attribute selector.

How to write attribute selector?

[attribute]
What we are doing is that, in the bracket we will write the attribute name by which we want to target elements.

[attribute=value]
What we are doing is that, in the bracket, we will write the attribute name then equal and then the attribute value which is already written in the tag. By this we way we can select attribute according to the value.

Ways to write and use attribute selector:

[attribute]
Here those elements will be selected whose contain the given attribute.

[attribute=value]
Here those elements will be selected whose attribute contain the given value.

[attribute^=value]
This symbol ^ means start with. So we can say that if an attribute value starts with the given value then select it.

[attribute$=value]
This symbol $ means end with. So we can say that if an attribute value ends with the given value the select.

[attribute~="value"]
This ~= means select elements with an attribute value containing a specified word. So in the position of value you will pass a word.

[attribute^="value"]
This ^= symbol means start with. This selector is used to select elements with the specified attribute whose value starts with the specified value.

[attribute$="value"]
This $= symbol means ends with. This selector is used to select elements which attribute value ends with the specified value.

[attribute*="value"]
This *= means specific value. This selector is used to select elements whose attribute value contains a specified value.