CSS selectors define the elements which pertain to a set of CSS rules. Mostly, we used to use space between the parent class and child class to write the styles for the child class. And now, we can use a class multiple times in a div or an overall page. Even if a class is repeated, we can write styles for the particular class by using the parent class. But, sometimes the parent class may also be the same. In this case, we can use some selectors such as.,

Signs (>, + and ~)

Now you can understand the difference and learn how to use the signs in CSS selectors.

To understand the signs, let us take a small sample code.

And, this is the style for the <p> tag.

This means that the CSS styles (properties) that are applicable for all the <p> tags are within the container, as it is the descendant selector.

Sign >

We can write the CSS like this:

The style is applicable only for the DIRECT child of the container.  Here, the direct child is <p> First Paragraph </p>, <p> Fourth paragraph </p> and <p> Fifth paragraph </p>. It will not consider the second and third paragraphs.

Sign +

The problem is sometimes we don’t have a particular parent class to style it. In that case, we can use this sign. The symbol is called an Adjacent sibling combinator. It is used to separate two selectors and matches the second element only if it IMMEDIATELY follows the first element, as well as have the same parent class.

This style is applicable for the IMMEDIATE after the first for the direct element, which is  <p> Fourth paragraph </p>

Sign ~

It is a general sibling combinator and is similar to the + sign. But it is NOT just for the immediate one, it will select all the elements after that.

This code will target both <p> Fourth paragraph </p> and <p> Fifth paragraph </p>.

Here is a live example:

Signs in CSS Selector

Signs in CSS Selector

The .toolbar class has a set of child classes. Please check with the first screenshot, there is no main parent class or a different class name for the child classes. So if you write a style for a child class, it will target both .toolbar parent class and child classes. To avoid this problem, we can use >, +  and ~ signs.

We hope that you’ve now got an idea of using different signs in CSS Selector. If you found this blog helpful, then please do let us know if you have any queries.

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Ready to drive online revenue

Get In Touch

Leave a Reply

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