CSS Selectors and Pseudo Elements

What is CSS?

CSS is Cascading Style Sheet which helps in making your websites beautiful. However, CSS doesn't mean you only use them for styling. It is all about how you select your HTML structured website effectively, styling is the next subsequent step you follow.

Once you understand how to select the element which is deeply nested in your HTML, you can make things beautiful by declaring the styles you wish for.

There are three ways you can write CSS to your HTML page.

Inline Styling: When your CSS is specific to the element, you can use Inline styling. An inline style may be used to apply a unique style for a single element.
```
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
```

Using style tag: You can specify style tag in the head section of your html

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

With External CSS: Specify external file and include all your CSS content in that file. You can link this CSS file in your HTMl file.
```
<link rel="stylesheet" type="text/css" href="mystyle.css">
```
Cascading Order:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

Considering the fact that selecting your CSS is of priority, in today's blog we will walkthrough the CSS Selectors.

CSS Selectors:

CSS Selector is a rule with which you effectively select the elements of your HTML and then specify what kind of styling is to be given for those elements. There are different kind of architectures defined in selecting the elements. We will go through each one of them.

1. Universal Selectors: The browser has default styling for your HTML content. Ever wondered why it has specific font for h1, h2 h3.. tags and why the background color is white with the font-color black by default. These are the browser defaults. The paddings, default fonts and background color are applied to everything. This can be done by Universal Selectors.

Syntax: * { style-properties }

* {
  background-color: #4d4d4d;
  color: #ffffff;
}

This applies to the whole HTML. Always try to use the hexadecimal notations because hex-codes are universal codes. The colors which you mention with words like white, blue etc., work different in different browsers.

2. Individual Selectors: If you want to target single element all across your HTML, you can go with the individual selectors. However, it selects all the elements you specified in the HTML. If there is a case where you want to select all the places the element is located use individual selector.

Syntax: element-name { style-properties };

CSS:

p {
  color: red;
}

HTML:

<body>
      <p>Hi, Welcome to article of CSS Selectors </p>
      <div><span>This is an inline element</span></div>
      <p>End of the article!!</p>
</body>

This selects all the p tags and adds color red to those paragraphs.

3. Class and ID Selectors: When you want to specifically target element then you can use class and ID selectors. The only difference between the ID selector and class selector is that you can select unique single element with ID, when you have multiple elements you can use class to group them up.

Syntax:

#id-selector { style-properties };
.class-selector {style-properties};

.warning { // all elements which have this class
        background-color: #ef9323;
        color: #FFFFFF;
}
#inline-element { // unique element which has this ID. 
      color: #ef6879;
}

<body>
      <p class="warning">Hi, Welcome to article of CSS Selectors </p>
      <div id="inline-element"><span>This is an inline element</span></div>
      <p class="warning">End of the article!!</p>
</body>

and Selector (chained): And selector is used when you want to select both the classes in specific and both has to match the condition making it true. Any other one not matched will not be selected.

Syntax:

classname1.classname2{  style properties }  or
#idname1#idname2 { style.properties }

li.bg-black.text-white{
        background-color: #000;
        color: #ef9323;
}

<ul>
      <li class="bg-black text-white">item1</li>
      <li class="bg-black">item2</li>
      <li class="bg-black text-white">item3</li>
      <li >item4</li>
      <li>item5</li>
</ul>

Selects first li and third li as second li has not met text-white class. and Selector should satisfy the chained selectors. Multiple conditions and all needs to be true.

5. Combined Selectors: When you wish to apply same property to different elements go with combined selectors. Combined selectors separate elements with a comma.

Syntax:

Element1, Element2.....{ style-properties }

span, li {
        background-color: burlywood;
}

All spans and li elements will be selected.

6. Inside an element: When you specifically want to select an element within another element (used in deep nesting). Here, I want to select div and select ul and then the li. The li outside the ul shouldn't be selected.

Syntax:

element1 element2 element3....{ style-properties }

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
</div>

Use space instead of comma for inside nesting elements:

div ul li {
        background-color: #4b35f1;
}

7. Direct Child: This selector selects all the direct child you mention to that specific element. For Example, I would like to select li and p elements which are direct child to div.

Syntax:

element1 > element 2 > element3 { style-properties }

div > li > p {
        background-color: #7667e4;
}

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
</div>

This selects, lorem, awesome elements but not the li elements listed in ul because it isn't the direct child to div. Here, li is the direct child of ul.

8. sibling ~ or +: This selectors help you in selecting the next immediate sibling of the selected element.

Syntax:

element + element { style-properties };
 element ~ element { style-properties };

.sibling + p {
        background-color: pink;
}

<section>
      <p class="sibling">Test 1</p>
      <p >Test 2</p>
      <p>Test 3</p>
      <p >Test 4</p>
      <p>Test 5</p>
</section>

Selects the Test 2 paragraph element. The selected p element is Test 1 which has class sibling and the immediate p element to it is Test 2. Use this selector when you wish to select the sibling element (just after the element).

Pseudo Selectors or Pseudo Elements:

1. :: before In CSS, ::before creates a pseudo element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. This doesn't work if you don't specify content and display:block properties.

.imp-label:hover::before{
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: orange;
}

<body>
    <div>
      <form action="">
        <label class="imp-label" for="name">name</label>
        <input type="text" name="name" />
        <label for="email">email</label>
        <input type="text" name="email" />
        <button data-tooltip="Tooltip" type="submit">Submit</button>
      </form>
    </div>
  </body>

2. :: after In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

.imp-label:hover::after{
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background-color: orange
}

Here is the entire file for your reference:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Selectors</title>
    <style>

      /* universal selector */
      * {
        background-color: #4d4d4d;

      }

      /* individual selector */
      p {
        background-color: #d1ea76;
      }
      /* class and id selector */
      .warning {
        background-color: #ef9323;
        color: #FFFFFF;
      }
      #danger {
        background-color: #e93916;
        color: #FFFFFF;
      }
      /* and selector (chained) */
      li.bg-black.text-white{
        background-color: #000;
        color: #ef9323;
      }
      /* combined selector */
      span, li {
        background-color: burlywood;
      }

      /* inside an element */
      div ul li {
        background-color: #4b35f1;
      }
      /* direct child */
      div > li > p {
        background-color: #7667e4;
      }

      /* sibling  ~ or + */
      .sibling + p {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>Welcome to CSS Selectors</div>
    <span>This is an inline element.</span>
    <p>This is a paragraph. </p>
    <ul>
      <li class="bg-black text-white">Tea</li>
      <li >Coffee</li>
      <li >Limca</li>
      <li >Sprite</li>
      <li>Maaza</li>
    </ul>

    <div>
      <p>This is first paragraph</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
    </div>

    <section>
      <p class="sibling">Test 1</p>
      <p>Test 2</p>
      <p>Test 3</p>
      <p>Test 4</p>
      <p>Test 5</p>
    </section>
  </body>
</html>

We will continue further interesting facts about CSS in next article.

For Further Learning: MDN Docs

CSS Selectors and Pseudo Classes

Table of contents

No headings in the article.