selector in css, css, positioning, best blog on css

Hi Devs,

Hope you are all doing good!!!.

Today we are going to discuss about the all types of CSS selectors. Now you are thinking about hey I know that give an id or class and select it like #id & .class, yes you are absolutely correct my friends even I use the class selector a lot of time but today I will show you how the selector can enhance your expertise.

Lets discuss now...

Universal selectors
```
*{
  margin: 0%;
  padding: 0%;
}
```
As its name above selector * will apply the css on your whole html body. If we need a any effect in all over the page we usually write in this selector. Basically this * is comes from the regex.

Write a fonts-family in this is a always good Idea.
Group Selector
```
h1, p , span{
  color: #2d2d2d;
}
```
This selector applied with the tag name its effect on all the group of elements in your html which is having the same tag h1, p, span. Don't use it much but yeah knowing about it can help you on the go.

This selector can help you to manage a typography of page.
Individual selector || ID Selector
```
#unique-id{
  background-color: #f3f3f3;
}
```
This is the unique selector for the elements in html by mentioning the ID of it. This selector will style only one elements of your page. We should give it the less priority to it over the class selector.

To apply a animation on any element select it by id is good approach.
Class selector
```
.bgc-theme{
  bakground-color: #758283;
}
```
This selector will help you style the common type of element. The elements which shared the common class will get the same style of css.

You can decide your typography by styling them in class.
Chained selector

style.css
```
    li.bg-white.color-black {
      background-color: #000000;
      color: #ffffff;
    }
```
See the above example there is no space between li text-white bg-black This is actually the chained selector it works exactly like a && operator. No worries If you don't know the &&. Allow me to explain, above selector will apply where all the class is present in list elements. if any one of missing in that It will not work. See the html file of it. index.html
```
  <body>
       <li class="bg-white color-black">
          hello Readers!!
      </li>
      <li class="bg-whit" >Hello devs</li>
  </body>
```
Now see the output. Output

Inside || Element Selector

style

ol li section h4 {
    color: red;
  }

The above css selector will work like ol => li => section=> h4 here '=>' depicts the child relations and will impact on the h4 directly. Have a look at the html index.html

<body>
    <ol>
      <li>List one</li>
      <li>
          List two
          <section>
              Hey
              <h4>Hello</h4>
          </section>
      </li>
      <h3>H3 One</h3>
      <p>Paragraph Two</p>
      <span>hello span</span>
</ol>
</body

OutPut

Direct Child Selector

style.css

   div > nav {
          display: flex;
          list-style: none;
      }
      div > nav > li {
          margin: 5px;
          color: rebeccapurple;
          font-size: 1.5rem;
      }

Above the div > header has a parent child relation. See the HTML you will have a clear understanding
of it. index.html

          <body>
            <div>
              <nav>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
              </nav>
          </div>
        </body>

Output

Sibling selector ~ and +

style.css

.one + li {
    background-color: grey;
    color: rgb(165, 7, 7);
  }

index.html

<footer>
  <ol>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
    <li class="four">Four</li>
    <li class="five">Five</li>
  </ol>
</footer>

In above example the + sign will include and apply selector just only next sibling to it not even itself.

Yes we have another one ~, It will include and apply all the sibling elements just after that, lets have a look on that.

style.css

.one + li {
    background-color: grey;
    color: rgb(165, 7, 7);
  }

.two ~ li { /* ~ will select all sibling after class two*/
    background-color: rgb(88, 83, 83);
    color: rgb(7, 0, 0);
  }

Hope you have enhance your understanding about the CSS selector.

CSS selector

Table of contents

No headings in the article.