Basic Selectors

To start with a basic selector first we need to understand what is selector, CSS selector is simply the code you write for your HTML elements on which your CSS styles will apply

.css-style{
color: red;
}

when it comes to basic selectors there are only 4 types of the selector which are universal, type, class, and id selector and other selectors are based on this selectors

Universal Selector *

The universal selector is*, Like its name, this selects everything, In the below code margin: 50px will apply to every element, css *{ margin: 50px }

I usually use this selector to remove the default margins

Type Selector

This type of selector allows you to select all the elements of a particular type, such div,p, or spam element. To use this selector just put the name of a selector you want to select. in the below code background-color: red will apply on every ` p tag.

p{
background-color: red
}

usually, I use the type selector for removing or adding a margin or setting background-color

Class Selector

This is the most common selector that you will use, "class" is the attribute that you will apply to your HTML tag, this class attribute is used in CSS as well as in java-script to target the element, this selector allows you to specify the HTML tag that you wants to apply the style you can also share style between the other element by giving the same class value.

Let's see the example

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

you can see we gave btn class on both the button tag and also givebtn-primary class and btn-danger class to give extra style.

.btn {
  border: 1px solid black;
}
.btn-primary {
  background-color: blue;
}
.btn-danger {
  background-color: red;
}

Id Selector

Id selector is the final selector of the basic selector, This selector is similar to the class selector. hence there are some major differences we can not share an id with another element on a single page hence id is unique and can not be the same for two or more elements, Id selector is more specific hence overwriting most of the style which you don't want. The final difference is that id selectors start with a # symbol instead of a period.

<div id=specific class = one></div>

#id {
  height: 200px;
  width: 200px;
  background-color: antiquewhite;
}

.class {
  height: 200px;
  width: 200px;
  background-color: green;
}

you can see that in the above example I added both class and id selector, but the class selector no applied to the element because an ID selector is more specific than a class selector, which in turn is more specific than a tag selector.

Combination Selectors

there are six types of combined selectors, you need to know which selector will allow you to select the exact element or elements you wanted to select.

Descendant Selector

This type of selector allows you to select an element that matches the descendant of an element which is another element for example,

div span  {
  color: yellow;
}

 <div>
 -    <span>hello</span>
       <p>
 -        <span>hi</span>
       </p>
   <input type="text">
  </div>
<input type="text">

The above selector selects all the ` span that are descendants of the div element. in order to use the descendant selector you need to separate the two selectors by space, the first selector will be the parent, and the second will child.

Direct Child Selector

This selector is similar to the descendant selector but the main difference is Direct child selector allows you to select the direct child of the parent element.

.one > p{
background-color: yellow;
}

.one>h1{
 background-color: yellow;
}

<div class="one">
-   <p> hello</p>
    <span><h1>hi</h1> </>
</div>

you can see in the above example that h1 inside the span is not selected because it is not the direct child of the <div class="one">

in order to use this selector just put the "greater than" symbol between the first selector and second selector.

General Sibling Selector

The general sibling selector allows you to select all the next sibling elements that come next to the first element. This is because CSS can only read in one direction so has no way to modify elements that come before other elements.

.select~ li {
background-color:yellow;
}

<ul>
<li>zero</li>
<li class="select">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

you can see that all elements are selected after the element that has this selector applied.

In order to use this selector just put ~ between the first element and the second element.

Adjacent Sibling Selector

Similar to the general sibling selector this selector will select siblings, but this selector can only select the only first sibling,

.select + li {
background-color:yellow;
}

<ul>
<li>zero</li>
<li class="select">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

you can see that only one element is selected, it is also important if the sibling directly next is not the same element that you have mentioned then this selector will make no change.

in order to use this selector you simply put + between the first selector and second selector.

Or Selector

Or selector allows you to select as many elements you want to give some style.

div , span , p{
color:yellow;
}

<div><h1>hello</h1><div>
<p>hi</p>
<h1>hey<h1>
<span>hoho<span>

you can see that only div , span , p are selected. to use this selector just separate your selectors by ,.

And Selector

The final combination selector And selector, This selector allows you to target the only element that matches the condition, for example

p.first{
background-color:yellow;
}

<p class="one">one</p>
<p class="first">first</p>
<p class="last">last</p>

As you can see only p with class "first" is selected in the above, using And selector is indirectly easy since all you have to write all the selectors right next to each other with no spacing between them. The only important thing to know about this selector is that if you are using a universal selector or a type selector then you must put the type/universal selector first.