CSS Selectors hierarchy

I’m in the CSS basic course, step 12 “Chaining Selectors” and it states:

Chaining Selectors

When writing CSS rules, it’s possible to require an HTML element to have two or more CSS selectors at the same time.

This is done by combining multiple selectors, which we will refer to as chaining. For instance, if there was a .special class for h1 elements, the CSS would look like:

In the previous step it mentioned that IDs are the most specific and will override all other selectors. Is it possible to chain id and class selectors together, or even all 3 to keep CSS formating to a very specific area when id, class, and tag selectors all share a common line of code?

1 Like

Well, chaining IDs with classes is not necessary since there is only one HTML element with that particular ID tag. You can however chain classes to target specific elements. Even more so there are even CSS selectors that can for example select the next sibling of an element or the first parent.

For a complete list of selectors go here ;).

The only reason I can think of to chain a class to an ID is in the case that you have multiple elements of a certain tag under a div with an ID.

Say you have two sections with separate IDs yet the child elements are of the same class but you want to implement only one difference ( i.e. font colour).

The HTML:

<div id='parent1'>
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>

<div id='parent2'>
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
</div>

The CSS:

.child {   /* Targets all elements with a class of .child */ 
   font-size: 20px;
   text-align: center;
   font-weight: bold;
   color: blue;
}

#parent2 .child { /* Only targets the elements with a class of .child which are children of the div element with an ID of #parent2 */
   color: red;
}

Does this answer your question?

5 Likes

To add to this section which I might have misunderstood previously, if you have multiple elements you would like to give the same css attribute value you can combine them using a comma like so.

h1, h2, #header1, .subtext {
    color: blue;
}

The host tells me that I can not go back to the home only but the rest I do not know
On a mutis multisite, rather than duplicate fonts morning result, I consider as a method to put them in a directory accessible by each site.

Hello :wave:

I’m sorry I don’t understand, what is your question?

Can you please rephrase and give as much information as possible.

CSS selectors define the elements to which a set of CSS rules apply. Note : There are no selectors or combinators to select parent items, siblings of parents, or children of parent siblings. Basic selectors you can code by sitting on any corner desk simply