All you need to know to Understand CSS selectors.

Most of the developers use classes and id for selecting any element from the HTML but this is very basic everybody uses it by putting a class on that element and then selecting it, you're missing out on an enormous level of flexibility that CSS and CSS3 selectors are providing. So let's get started with our basic selector and then we will move to some advanced selectors.

Basic Selectors

Universal Selector :

• The * star symbol is used to select each and every element on the page. Usually, all developers want to reset their margin and padding to 0 to get rid of the provided margin and padding by the browser itself. It helps in being consistent apart from the browser in which that website is opened.

*{
     margin: 0;
     padding: 0;
}

This can also be used as selecting individually every child element. Take a look at the example given below there you can use Button to remove the selector and add also.

.container * {
      border: 5px solid #ffc400;
}

Class Selector

• This is a very common selector. Everyone is using it only and it is handy also.

.container {
      background: #1f1f1f;
}

Id Selector

• This selector is vastly used for manipulating things from Javascript. But you can also select any element by it.

#container {
      background: #1f1f1f;
}

Type Selector

• What if you want to target all elements on a page, according to their type, rather than an id or class? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul { }.

ul {
      list-style: none;
}

Grouping Selector

• It groups the selector and any of the element that have those selector can be selected.

li , span {
     color : #7cc964;
}

<span>This is a span</span>
<div>This is a div</div>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<div>
  <li>1</li>
  <ul>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

Combinators

Descendant Combinator

• It is used when you have to go deep inside an element to select child or grandchild and more nested elements. It is separated by " "

.container ul {
    list-style: none;
}

In the following example, A B C D are in .container so only those are affected by the chained selector.

Child Combinator

• It is not a very often used selector but at specific things it is helpful. It is separated by >. It will only select direct children but not at another nested level.

Note: The difference between the " " descendant selector and > this selector is that the descendant selector will work for any nested level but in the case of child combinator it only selects the direct children of that element. C D E are nested one level inside the ul.

.container > li{
     list-style: none;
}

if the above code is like this

.container  li{
     list-style: none;
}

then this will be the result

General Sibling Combinator

• What are siblings? Those elements which are inside the an element at the same level of nesting. A B C D are siblings to each other and they are children of ul

• It selects every single li that comes after li.mystyle ( li which have class="mystyle")

HTML of the following example :

<div class="container">
  <ul>
    <li>A</li>
    <li class="mystyle">B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>

li.mystyle ~ li{
  color: yellow;
  list-style: none;
}

Adjacent Sibling Combinator

• It selects the first li that comes after li.mystyle ( li which have class="mystyle")

li.mystyle + li{
  color: yellow;
  list-style: none;
}

Pseudo Selectors

Pseudo Classes :

The : works if the element's state changes by the interaction by the user.

Commonly used Pseudo classes are

• :hover
• :visited
• :active
• :focus
• :required
• :checked
• :disabled

These pseudo-classes relate to the location of an element within the document tree.

• :root
• :first-child
• :last-child
• :nth-child(n)
• :nth-last-child(n)
• :only-child
• :not(selector)

Syntax for all the above Pseudo Classes

selector:pseudo-class {
  property: value;
}

Pseudo Elements ::

• The :: is used to style a specific part of the selected element

Commonly used Pseudo Elements are

• ::after
• ::before
• ::first-line
• ::after
• ::after

Attribute Selectors

• [attribute] If any element has this attribute it will select that element
• [attribute="value"] If any element has this attribute="value" then only that element is selected
• [type="text"] It is very common use case of this attribute selector it selects all the elements having type="text"