Krishna Saini's team blog
Don't let CSS scare you........CSS Selectors & pseudo-selectors in a nutshell

Photo by Jeffrey Leung on Unsplash

Don't let CSS scare you........CSS Selectors & pseudo-selectors in a nutshell

Krishna Saini's photo
Krishna Saini
·

4 min read

CSS is intimidating for many of us. Its too deep and when I started learning it from a Udemy course, I felt so overwhelmed with lot of properties. I tried remembering all of them by writing them in my notes but still I was not confident in CSS. Finally, I came across this advice from Hitesh Choudhary-

Master selecting elements first to master CSS

At the starting, I was rigorously learning all the selectors that exist in CSS. Slowly, when I move ahead in my journey of Frontend learning, I realized that was not necessary at all. So, in this blog, I am going to explain the most used selectors that you will encounter most of the time. and if in rare case, you need any odd selector, one can learn it that time. Remember, there is no way you can memorize all the properties of any language. Even the best programmers use google. So, no need to memorize each property. With practice, they will come intuitively.

What are CSS selectors? CSS selectors are used to select html elements you want to style with.

1. individual/type selector

you want to select any html tag, write its name and style it. 

/* selecting all the div elements */
div{
background-color: #f8f8f8;
}

Here, you must be observing the problem with individual selector. It will select all elements of that type. This is not what we want, do we?

2. class and id selector

In real world, we always use class, not ID, as to prepare ourself for any potential change in future

3. universal selector

It is used to apply certain properties that does not get inherited automatically to all the elements.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*does not cover pseudo-elements. They cover only real elements that are present in DOM. And box-sizing is not an inherited property and hence must be explicitly mentioned on the pseudo elements also.

*, * :: after, * :: before {
   box-sizing : inherit ;
}

Many times it is use to select all child of a parent too. 

// html 
<div>
  <h3>Heading</h3>
  <p>Paragraph</p>
</div>

// CSS to select both child of idv which are of different types
div > * {
margin : 0 auto;

4. Chaining selectors or Combinators

  • element1, element2 It will selects all element1 and all element2

  • element1 element2 it will select all element2 which are inside element1

  • .className1.className2 it will select all elements which have both className1 and className2 as its class attribute

<div class="name1 name2">...</div>
<style>
.name1.name2{property:value;} /* Selects all elements with both name1 and name2 set within its class attribute */
</style>
  • Direct child selector (element1>element2)

it will select all the direct child of element1 which are of type element2 .hero-container-right > * { margin: 2rem; }

  • Next Adjacent sibling selector (element1+element2) it is used to select an element that is directly after another specific element. "adjacent" means "immediately following".
  • All Next sibling selector (element1~element2) It selects all elements that are next siblings of a specified element.

5. ::after/ ::before Selector

They creates a pseudo-element that is the last child of the selected element. The CSS ::before selector can be used to insert content before the content of the selected element/s. The CSS ::after selector can be used to insert content after the content of the selected element/s. They are inline by default. They are often used to add cosmetic content to an element with the content property.

// html 
<div class="container">
        <span>TransAsia</span>
</div>

// CSS
.container::after {
    content : "TM";
    padding : 5px;
    border : 1px solid;
    border-radius : 50%;
   }

Once you masters selecting elements, it will not be tough to style that element because in ideal case, most of the styling properties will be coming from design team and you will just need to incorporate them. Unless you are in design team, You will not be trial and testing with all these properties for pixel perfect outlook of your website. Also, just knowing these selectors will not make you CSS master. There will be some more steps too to gain full confidence in CSS. One of these step is positioning the element.

Learn Code Online