GD's blog

CSS Selectors

Gandharva R's photo
Gandharva R
·

3 min read

Table of contents

Let's take a look at different types of CSS selectors that are widley used. I have created sandbox so that you can check and playaround. Below is the HTML source file and end result sreen shot that you can refer to understand how each selector works.

<body>
    <main>
        <h1>CSS Selectors</h1>
        <div class="parent">
            <h2 class="text">Parent</h2>
            <section id="child1">
              <h3 class="text">Child 1</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, aut!</p>
              <a href="https://web.codercommunity.io/" target="_blank">Link1</a>
              <a href="http://" target="_self">Link2</a>
              <a  href="" target="_self">Link3</a>
              <a  href="" target="_self">Link4</a>
              <div>
                <h4>Sub-Child</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, doloribus!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, corporis.</p>
                <ul>
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
              </div>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa, blanditiis?</p>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa, blanditiis?</p>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa, blanditiis?</p>
            </section>
        </div>
    </main>
</body>

selectors.png

  • Universal Selector:

    Target all the elements and apply the required CSS property and is written using * symbol as below.
* {
    background-color: black;
    color: white
}

  • Type Selector:

    As the name suggest it is use to select particularelement.
h1 {
    color: brown;
}

  • Grouping selector:

    Used to select multiple elements.
h1,h2 {
    text-align: center;
}

  • Class Selector:

    This is one of the most commonly used selector and using this we can target multiple elements. In order to use this selector we need to follow two steps:

a) add class attributeto the HTML element which you want to target. You can have multiple HTML elements with same class names.

<h2 class="text">Parent</h2>
<h3 class="text">Child 1</h3>

b) to target the class elements we write dot(.) followed by the class name.

.text {
  background-color: blue;
}

  • ID Selector:

    This is similar to Class selector, but it is used to target unique element and instead of dot we use # symbol to target. Not more than one elements can have id attribute with same value. ID selector is mostly used in DOM manipulation in JS.
<section id="child1">

#child1 {
    border: 2px solid blue;
}

  • Attribute Selector:

    We can select the HTML element using their attribute name and value as shown below.

Selective all the anchor tags with attribute name target

a[target] {
   color: yellow;
   margin: 1rem;
}

selecting all the anchor tags with attribute name and value target="_blank"

a[target="_blank"] {
    color: red;
}

  • Combinators Selectors:

    We have four different combinator selectors.

Descendant Selector: To target similar children inside parent element. In the below code we are slecting all the div elements inside section.

section div {
    border: 2px solid red;
    margin: 0.5rem;
    padding: 1rem;
}

Child Selector: To select all the specific children, below we are selecting all the p element only inside div.

div > p {
    background-color: yellow;
    color: red;
  }

Adjacent Sibling: To select immediate sibling element.

 div + p {
    background-color: blue;
  }

General Sibling Selector: To select multiple similar siblings

div ~ p {
    color: lawngreen;
  }

  • Pseudo-classes:

    This is spcial type of selectors i.e used when there is change in the state of the element. in the below code we want to target link any apply the property only when the use hover on the link.
a:hover {
    background-color: azure;
    color: cornflowerblue;
  }

Simialrly we can apply the property when user visits the link.

a:visited {
    color: blue;
  }

We also have other kinds of pseudo elements, when we want to insert content before or after the element. To inster anything before we use double :: followed by before keyword

ul::before {
    content: "before";
    color: blueviolet;
  }

To inster anything after we use double :: followed by after keyword

  ul::after {
    content: "after";
    color: blueviolet;
  }
HTML5CSS3ineuron