A CSS Selector

What is a selector?:

A selector is an element of an HTML tag, any class, id.

How :

you have below code in your html page

<div>
        <p>I want to increage my font size and color </p>
        <p>I don't want to increage my font size and color </p>
</div>

Now you want to apply CSS on the p tag. how you can do this. To apply CSS on the p tag. You should apply CSS like below code

p{
   font-size:25px;
   color:red;
}

Now I will tell you some selector name list

1. Universal Selector
2. Type Selector
3. Class Selector
4. Id Selector
5. Attibute Selector
6. Grouping Selector

let Explain every selector one by one.

Universal Selector :

*{
color: blue;
}

In CSS, * is a universal selector that applies CSS to every element.

Note: after applying this CSS every HTML element on the page to have blue text.

Type Selector :

section {
padding: 2em;
}

a type selector matches the HTML tag and then apply

Note: This rule causes every

element to have 2em of padding on all sides.

Class selector:

class is an HTML tag attribute. In this class attribute, we define many CSS classes.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

In the above code, there is a class "my-class" for this, we can apply CSS like this

.my-class{
color: red;
}

ID selector:

An HTML element with an id attribute should be the only element on a page with that ID value. You select elements with an ID selector like this:

#rad {
border: 1px solid blue;
}

Attribute selector:

Instruct CSS to look for attributes by wrapping the selector with square brackets ([ ]).

[data-type='primary'] {
color: red;
}

This CSS looks for all elements that have an attribute of data-type with a value of primary, like this:

    <div data-type="primary"></div>

Grouping selectors:

A selector don't have to match only a single element. You can group multiple selectors by separating them with commas:

strong,
em,
.my-class,
[lang] {
    color: red;
}

This example extends the color change to both strong and em. It's also extended to a class named .my-class, and an element that has a lang attribute.

Blog Title : A Css Selcetor