selector featured image

How To Style Elements Without Using A Class Or An Id

Ever considered styling your element without a class or an ID ? this is as simple as launching your code editor, you can actually style an element without a class or an ID, no doubt,  Working with css is always fun as you will always encounter various challenges that will make you have interest and love for coding but that will only happen if you actually know exactly what value to apply for each selected property of an element. We always know it is much easier styling an element using a class or an id but, how about without a class or an ID? Let us see some possible ways to style an element without a class or an id with some few codes below.

Four ways to style an element without using a class or an ID

Using the

Element/tag name

Parent

Child selector

Next element selector

Let us assume we have the following html

 <section>

      <p>i’am a child of section</p>

      <article>

        <h3>i am a grand child of section and a child of article</h3>

        <div>

          <p>

            i am a great grand child of the section, a grand child of          article and a child of div

          </p>

        </div>

<p>third child of the article <h2>i am a child of the this paragraph</h2>

</p>

      </article>

    </section>

Using the element/tag name to styling without using a class or an id

We want to style all the p tag

All we need do in css is to call the p tag as shown below

p {

  color: orange;

}

And all the p tag text will automatically change to orange

Using the parent

We want to style all the p tag that are inside a div

All we need do in css is to call the div tag as shown below

div {

  color: yellow;

}

But you will notice that the color did not change, why? This is because we already specified that all paragraph should have a color of orange using the p tag. So how do we resolve this? Use the child selector or next element selector

By using the child selector to style an element without a class or an id

div :only-child {

  color: yellow;

}

article :nth-child(3) {

  color: #2300bf;

  background-color: #a8eb12;

}

To learn more about child selector, click here

Remember that all elements in the body are children of the body and the body is a child of the root which is HTML. Click here to learn about the html structure.

Using the next  element selector to style an element without using a class or an id

We want to style all the h1 tag that is inside a p tag

We can achieve this by using the code below

p ~ h2 {

  color: pink;

}

Now I did like to quickly remind you of specificity in css.

If you give a paragraph a class or id and you specified the color, no matter where you override it in your css, the specified color in the class will always take precedence over any other styling. To learn more about specificity, click here

There are so many other ways to style elements without using a class or an ID, and the once illustrated above are just the very few you may always use frequently. Hopefully this illustration gives a an idea of how you can actually use the child selector and next element selector in targeting elements for styling in CSS.

Leave a Comment

Your email address will not be published. Required fields are marked *