CSS is a Cascading Style Sheets using css we style our sheet means html page. One of most Importante part of CSS is selecting a particular element, tag, class, Id it's sometime very difficult to select something inside page if you know how to select any particular tag, element, class, id than it's very easy to learn css.

1. Universal Selector

Whenever we want to select everything inside page we use universal selector. it select all element everything. we use * asterisk keyword.

it will select all and background color will black and font color will be white.

* {
  background-color:black;
  color : #ffffff;
}

select all p tags. both are same. for tags (*) is optional .

* p {
  color:green;
}

p{
  color:green;
}

2. Individual Selector

Whenever we want to select particular tag we use this.

h1{
  background-color:black;
  color:white;
}

it select all h1 tag available inside page

3. Class(.) and Id(#) Selector

Whenever we want to select any class or Id we use this. For classes we use (.) symbol For Id we use (#) symbol

.bg-black {
            background-color: black;
            color: white;
}

#item-2 {
         background-color: cyan;
         color: black;
}

.test-2, .test-3 {
         background-color: brown;
         color: white;
}

4. And Selector (Chained)

Whenever we want to select any tag which has class name or id and it follows the same chain.

those have li tag and bg-black class and text-white class only those tag will be selected all these should be there. we don't use any spaces between.

li.bg-black.text-white{
            background-color: black;
            color: white;
}

p.bg-pink {
        background-color: pink;
}

5. Combined Selector

Whenever we want to select all and multiple tag we use combined selector we use (,)

at first it select all span and also select all p tags

span, p {
            background-color: black;
            color: white;
}

.bg-black, .bg-pink {
            background-color: pink;
            color: teal;
}

6. CSS Combinators

a. descendant Selector(space)

we use multiple tags class or id which follows space whatever we write at last it select

first go inside div inside div go into ul tag inside ul tag select all li

<style>
div ul li{
            background-color: black;
            color: white;
}

section p {
            color: violet;
}
</style>

b. Direct Child Selector

it will select only those who are direct child to tag we use (>) symbol select all the li tag which are direct child to ul

<style>
ul > li{
          background-color: pink;
          color: yellow;
}

div > p {
            background-color: black;
            color: white;
}


</style>

c. Adjacent Sibling Selector(+)

it will select its first sibling only use (+) symbol

div + span{
            background-color: black;
            color: white;
}

d. General Sibling Selector(~)

it will select its all sibling use(~) symbol

it will select all span sibling of div tag

div ~ span{
            background-color: black;
            color: white;
}

6. CSS Pseudo-classes

They show specific state of element or tag whenever we click a button than the button have diffenet state at that time we can give different style. there are many Pseudo classes in Css. use(:) symbol

<style>
.name:hover {
            background-color: pink;
}

button:active {
            background-color: yellow;
}
    </style>

7. CSS Pseudo Elements

Whenever we want to style any specific part of element. use (::) symbol.

p::first-line{
            background-color: black;
            color: rgb(255, 0, 221);
}

p::first-letter{
            text-transform: uppercase;
            font-size: 50px;
 }

.btn:hover::after{
            content: 'Hey!!';
            background-color: pink;
}

.btn-2:hover::before {
            content: "how are you";
            background-color: pink;
            text-transform: uppercase;
}