Repurposing CSS Class Selectors

Question

I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.

For example if I create

 h1  { 
      font-size:18px; 
      color:#FFFFFF; 
      font-family:Arial, Helvetica;margin:0;
      padding:0;
}

h2  { 
          font-size:18px; color:#000000; 
          font-family:Arial, Helvetica; 
          font-weight:normal;margin:0;
          padding:0;
}

I can repurpose the h selectors with something like

.whatever h1 {
    color: #000; 
    font: 2.0em arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 50px 0px 0px 50px; 
}

.whatever h2 {
    color: #000; 
    font: 1.7em bold arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 25px 0px 25px 75px;
}

If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.

Any thoughts?

Answer 1

This is called specificity.

It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:

HTML

<h1>I'm green with envy</h1>

<h1>And so am I</h1>

<div class="whatever">
    <h1>Because I'm rather special</h1>
</div>

CSS

h1{
    color: green;
}

.whatever h1{
    color: blue;
}

RESULT

The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:

HTML

<h1 class="whatever">I'm special</h1>

CSS

h1.whatever{
    color: blue;
}

Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)

How specificity is determined (simple rules to remember)

User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:

• Selectors with only the name of the element (e.g. h1) are the least specific of all
• Selectors with a .class are more specific than selectors with no class
• Selectors with an #id are more specific than selectors with a .class
• Selectors lower down in a stylesheet take precedence over earlier identical selectors

Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:

• Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
• Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.

How specificity is really determined (how to calculate it precisely)

Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.

If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)

Answer 2

You faced overriding the selectors.

example:

<div class="one">
     <div id="two">
          <h1> This is H1 text </h1>
     </div>
</div>

so you have set H1 to FFF - white color by:

h1 {
   color:#fff;
}

now we do first override ( using ID ):

div#two h1 {
   color:#888;
}

and the third, notice you don't have to put current element, you can set it for each element with given class:

.one div#two h1 {
   color:#000;
}

so in the end we have black text color.

The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.

Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces