Css

We don't have to use all the tools that are available in CSS to create a nice website.
But, if we know more tools, it means we have more choices.
Let's talk more about CSS Selectors.

Start Reading ;

Combining CSS Selectors

If you wonder why we’ve not talked about combining CSS selectors at the beginning, I’ve to say it was my bad. I’ve just missed these stuff for… no reason. :D

In every aspect of life, our most naturally way to learn anything, is not going on a straight line. Our paths are always spirals; seamless and continuity spirals.

A spiral: spiral

We start by learning some basic stuff and create some things. Then we back to the core knowledge to learn a little more deeply and create a little better things. That’s it.

And now we’re starting a new cycle by learning more about CSS Selectors. :D

What is benefit of Combining Selectors?

Let’s take a look back at our simple navigation bar.

HTML code:

To style the links, we’ve given them a nice class name nav-link which is very descriptive. But, what if we have another navigation bar in our webpage? By directly using the class name in CSS, we’ve made it not able to be re-used.

Fortunately, CSS allows us to combine Selectors to select elements more precisely and make class names able to be re-used. The snippet below is an example about combining CSS Selectors. In the example, there’re 2 CSS blocks:

  • The first one will select only .nav-link nested inside #topnav
  • The second one will select only .nav-link nested inside #sidenav

How to combine CSS Selectors?

Combining CSS Selectors falls into 3 types and we’re gonna talk about them one by one:

  1. Union & Intersection
  2. Next Sibling & Followed Siblings
  3. Children & Descendants

1. Union & Intersection

Union of multiple Selectors is commonly used to reduce repetition in CSS.

Let’s assume that we want to apply the same font to all headings in our webpages. So, this is how we style them without combining selectors:

CSS code:

The following re-written code snippet can provide the same effect:

CSS code:

By writing Selectors in a row and separate them using commas , we can write some shared rules and avoid repetition in our code. And that is union. Let’s talk about intersection.

Intersection helps us to select elements more precisely by append a selector to another one. The example below will select only <p> elements which are members of .excerpt, and vice versa.

CSS code:

HTML code:

2. Next Sibling & Followed Siblings

To select the next sibling of an element, we can use a plus sign + to combine Selectors. The example below will select only the <p> element which is the next sibling of #unique.

CSS code:

HTML code:

If we change the #unique to h2 in our CSS code, all of those 3 <p> elements will be selected. The web browsers will understand that we want to select every <p> elements which is the next sibling of an <h2> element.

To select all the followed siblings of an element, we can use a tilde ~ to combine Selectors. Let’s change our code snippets a little bit.

CSS code:

HTML code:

3. Children & Descendants

To select children of an element, we can use a greater-than-symbol > to combine selectors. The example below will select only the links which are children of #topnav, but not all descendants.

CSS code:

HTML code:

To select all descendants of the #topnav, we can just remove the greater-than-symbol >.

CSS code:

HTML code:

For all the examples in this tutorial, I’ve been using id selectors for better explanation. But, the front selectors can be class selectors or basic selectors.

Our tutorial about combining-selectors has finished. In the next tutorial, we’ll talk about pseudo-classes which can help us to create interactive effects: Something like when a visitor hovers mouse pointer on a link and the link’s color will be changed.

Next: Pseudo Classes ;