Question

Ok, I’m trying to understand the CSS cascade and specificity as a
“science” and not always leaving it up to “hit or miss” approach. I hope someone will help me out.

I have a rule:

.bluebutton {margin: 0 10px 6px 0;} /* rule 1 */

That I need to overwrite to change the margins in a particular instance.

So I added a class to the div and wrote:

.aside-right .bluebutton a {margin:30px 0 0 100px;} /* rule 2 */

However, rule 2 did not overwrite rule 1.

So I modified rule 2 to this:

.aside-right a.bluebutton {margin:30px 0 0 100px;} /* rule 3 */

and it overwrites the “.bluebutton” rule. /* rule 1 */

At first I wrote this HTML

 <a class="blueButton aside-right" href="enrollNow.html"><span>Enroll Now</span></a> <!-- html-1 -->

Then I modified and contained the button within a div and wrote:

<div class="aside-right"><a class="blueButton" href="enrollNow.html"><span>Enroll Now</span></a></div> <!-- html-2 -->

html-2 worked with rule 3.

Can someone help me understand why rule 3 overwrites rule 1 yet, rule 2 does not overwrite rule 1? It looks like rules 2 and 3 have the same weight (to me). Is it because rule 2 targets any anchor tag within any element with a class of .bluebutton and .aside, yet rule 3 targets only anchor tags with a class of .bluebutton? I hope I explained what I’m trying to understand clearly.

Thanks!

Answer 1

Rule 1
.bluebutton will target any element with the class bluebutton.

Rule 2

.aside-right .bluebutton a will target an anchor element nested inside an element with class="bluebutton", nested inside an element with class="aside-right". Example structure:

<div class="aside-right">
    <div class="bluebutton">
        <a href="#">link</a>
    <div>
<div>

Rule 3

.aside-right a.bluebutton will target any anchor with class="bluebutton" nested within an element with class="aside-right". Example structure:

<div class="aside-right">
    <a class="bluebutton" href="#">link</a>
<div>