Abhisek Panda
Understanding CSS Selector

Photo by Pankaj Patel on Unsplash

Understanding CSS Selector

Abhisek Panda's photo
Abhisek Panda
·

3 min read

Table of contents

You are starting to learn CSS for stylizing your HTML page. You have a unique design in your mind, you want to execute that design. But then you started getting bombarded by all CSS selectors. Your mind gets overloaded. So in this blog, we will understand all of the CSS selectors that you can use for that unique design.

Here are some of the basic CSS selectors that you can use:

  1. Universal Selector
  2. Element Selector
  3. Id Selector
  4. Class Selector

For understanding better all of these selectors, you can actually see what code is being used. You can copy and try it by yourself. Here is the HTML body code that we will be using:

<body>
    <h1>
        Understanding CSS Selectors
    </h1>
    <p>
        This is a demo paragraph in which we will be using it for the element selector.
    </p>

    <div id="div-container">
        This container will be used for the understanding of the Id-selector.
    </div>

    <p class="paragraph-class">
        This paragraph will be used for understanding the class selector.
    </p>

  <a href="#">Youtube</a>
  <a href="#">Twitter</a>
  <a href="#">Linkedln</a>
</body>

Univeral Selector:

You want to select all the elements that are present inside your HTML page. For this case, you should use the universal selector. To use this selector, we use (*).

Here is an example:

*{
  font-family: sans-serif;
  color: blue;
}

We are basically telling the universal selector, to go to the HTML page and select all the elements. After that, we want to change the font family to sans serif and the font color should be blue.

Output of using Universal Selector image.png

This is a basic example of the universal selector. You can use this for giving font family.

Element Selector:

You want to stylize only one element of the whole HTML page. Let's say that you want to change the background color of only h1. Then you use the element selector. 

*{
  font-family: sans-serif;
}

h1 {
  background-color: blue;
  color: wheat;
}

Here is the output:

image.png

The only catch with element selectors is that it select all the same elements. 

p {
  background-color: blue;
  color: wheat;
}

For example, you only want to change the background color of first p, because you are using element selector. It will select all p element.

Output:

image.png

To counter that problem we use these two different selectors.

Id Selector:

The solution to that problem, we use an Id selector. But remember on one page there can be only one unique id. You can't use it two times or repeatedly on any other element. 

    <p id="first-para">
        This is a demo paragraph in which we will be using it for the element selector.
    </p>

    <div id="div-container">
        This container will be used for the understanding of the Id-selector.
    </div>

    <p class="paragraph-class">
        This paragraph will be used for understanding the class selector.
    </p>

CSS part: To use the id selector, you simply type #id-name{} inside the curly braces you write your CSS code. 

#first-para {
  background-color: blue;
  color: wheat;
}
#div-container{
  background-color: black;
  color: white;
}

Here we are using two different Ids for for two different element. So the output will be:

image.png

Class Selector:

What if you want to select two or more elements at the same time? Instead of using different ids, we use the class selector.

To use this selector, first name the element with the same class. 

<p class="paragraph-class">
        This is a demo paragraph in which we will be using it for the element selector.
    </p>

    <div class="paragraph-class">
        This container will be used for the understanding of the Id-selector.
    </div>

    <p class="paragraph-class">
        This paragraph will be used for understanding the class selector.
    </p>

After that go to your CSS page and simply use the .class-name for this case .paragraph-class.

CSS Part:

.paragraph-class{
  background-color: wheat;
  padding: 7px;
}

And the output will be:

image.png

These are some of the basic selector that will get you going for the unique design.

CSScss_selector