CSS Selectors

what is selector

In CSS, selectors are patterns used to select the element(s) you want to style

h1{
  color: blue;
  background-color:yellow;
}
p{
 color: red;
}

in above CSS code h1 and p are selectors . also called as type selectors

Universal Selector

*{
  margin: 0;
  }

The universal selector, which is just a *, does like it's name says and selects everything. The below code would set the margin to 0 on all elements on the page.

Class Selector

<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Cancel</button>

In the above example you can see we gave both our buttons the btn class so they can both share the styles associated with that class in our CSS. We also gave them each their own btn-primary or btn-danger class to add extra styles for those specific buttons. To use a class selector in CSS you simply put the name of the class you want to select after a period.

.btn {
  border: 1px solid black;
}

.btn-primary {
  background-color: blue;
}

.btn-danger {
  background-color: red;
}

Id Selector

Id selectors are very similar to class selectors in that you can define ids on HTML elements and then reference them in CSS, but there are a few differences.

The first main difference is that id selectors cannot be shared between elements on the same page since in HTML an id is unique so no two elements on the page can have the same id.

  <nav id="nav-bar">...</nav>

The final difference is that id selectors start with a # symbol instead of a period.

  #nav-bar {
  margin-bottom: 1rem;
}

Combination Selectors

    <div>
      <span>Selected</span>
    <a>
          <span>Selected</span>
    </a>
    </div>
    <span>Not</span>

There are few main combination selectors you need to know which will allow you to select the exact element you want every time.

div span{
  color: red;
}

Direct Child Selector

  <div>
  <span>Selected</span>
  <a>
    <span>Not</span>
  </a>
</div>
<span>Not</span>

the direct child selector is for selecting child elements, but the main difference is the direct child selector will only select an element that is the direct child of the first parent selector.

div > span {
  color: red;
}

General Sibling Selector

 <a>Not</a>
<div></div>
<a>Selected</a>
<a>Selected</a>

This next selector is all about selecting siblings, but can be a bit confusing. Let's take a look at an example and I will explain what I mean.

div ~ a {
  color: red;
}

Adjacent Sibling Selector

 <a>Not</a>
<div></div>
<a>Selected</a>
<a>Not</a>

Similar to the general sibling selector the adjacent sibling selector is for selecting siblings, but this selector can only select the element that comes direct after the first element.

div + a {
  color: red;
}

Or Selector

<div>Selected</div>
<a>Not</a>
<div>Selected</div>
<span>Selected</span>

or selector which is a way to write a CSS selector that will select elements that match at least one of the selectors.

div, span {
  color: red;
}

And Selector

<div class="red">Selected</div>
<div>Not</div>
<span class="red">Not</span>

This selector allows you to write CSS selectors that force elements to match all the selectors specified.

div.red {
  color: red;
}

Group Selector

<div class="red">Selected</div>
<div class="green">Not Selected</div>
<div class="blue">Selected</div>

This selector is used to style all comma separated elements with the same style..

.red , .blue {
  border: 1px solid black;
}