CSS specificity problem

Question

I'm working on creating a javascript game for my own education. The game requires several pages, which I'm implementing through hidden divs that get hidden/unhidden when you want to view them (offtopic: Any advice about whether or not that's a good idea is welcome).

I have a CSS rule that hides all of my divs with display: none; and then a class that unhides a specific div with display:block;. However, instead of the class unhiding, it seems that my css selector for selecting all the divs is overriding the class, resulting in the rule not applying. I know I can just use the !important property to fix this, but I want to understand why what I've written doesn't work. I thought that a class would be a specific enough selector, and the rule even comes after the hiding rules.

Here's my source:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
    <div id="game">
        <div id="content">
            <div id="viewport">
                <div id="home_page" class="current_page">Home</div>
                <div  id="work_page">Work</div>
            </div>
        </div>
    </div>
</body>
</html>

and css:

#content
{
    background: #eef;
    padding: 5px;
}

#viewport div
{
    display:none;
}

.current_page
{
    display:block;
    //display:block !important; //One solution, but not preferred
}

BoltClock · Accepted Answer · 2011-09-12 18:40:25Z

5

#viewport div is an ID selector and a type selector. That's more specific than .current_page, a class selector by itself, because of the ID alone.

Instead of applying display: block !important;, you can and should modify your last selector, giving it the ID so it becomes #viewport .current_page. This makes the IDs equally specific, with the class selector being more specific than the type selector.

edited Sep 12, 2011 at 18:40

answered Sep 12, 2011 at 18:34

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Conrad.Dean Over a year ago

Works like a charm! #viewport div > .current_page because of the id, so #viewport div < #viewport .current_page holds more weight and then I can use the jquery.removeClass()/jquery.addClass() to manipulate visibility of my menu pages.

Felipe Buccioni · Accepted Answer · 2011-09-12 19:04:07Z

2

Does this work?

#viewport div.current_page
{
   display:block;
   /* display:block !important; //One solution, but not preferred */
}

edited Sep 12, 2011 at 19:04

Felipe Buccioni

19.9k2 gold badges31 silver badges32 bronze badges

answered Sep 12, 2011 at 18:35

BNL

7,1214 gold badges30 silver badges32 bronze badges

1 Comment

Conrad.Dean Over a year ago

This does work! Thank you! Turns out being as concise as #viewport .current_page gets the job done, as well.

Jose Faeti · Accepted Answer · 2011-09-12 18:34:37Z

1

Try with

#viewport #home_page {
  display:block;
}

You need to increase specificity, because the use of classes, IDs or nested elements in the CSS rules selector increase specificity by different amounts.

Here is a nice and easy to follow article about CSS Specificity.

As a general rule, I would say that if you need to use the !important statement, probably you didn't use the right CSS selector. I sometime found myself using the !important statement just to realize later on that I could obtain the same result using a better selector.

answered Sep 12, 2011 at 18:34

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

1 Comment

Conrad.Dean Over a year ago

Agreed. !important feels like cheating, and I'm keeping myself from doing it because pretty soon I might have two different !important rules conflicting with eachother if a project gets huge enough.

ThatMatthew · Accepted Answer · 2011-09-12 18:36:04Z

1

IDs carry more weight than classes, so use

#viewport div.current_page

answered Sep 12, 2011 at 18:36

ThatMatthew

1,2489 silver badges12 bronze badges

Comments

Chris Baker · Accepted Answer · 2011-09-12 18:46:01Z

1

In addition to the methods provided in other answers, you can also place the display:none style inline. Most javascript libraries have a show()/hide() methods - these methods typically change the display CSS property to block or none, respectively. This seems to be the most easy-to-maintain method, and then you don't even have to consider CSS cascades or specificity at all - inline styles trump everything else.

        <div id="viewport">
            <div id="home_page" class="viewportPage">Home</div>
            <div  id="work_page" class="viewportPage" style="display:none;">Work</div>
        </div>

Javascript:

function handlePageShow (page_element_to_show) {
  // hide all pages
  var pages = document.getElementsByClassName('viewportPage');
  var page_count = pages.length;
  for (var i = 0; x < page_count; i++) {
    pages[i].style.display = 'none';
  }
  // now show the target page
  page_element_to_show.styles.display = '';
}

This is made even easier using a javascript library such as mootools or jQuery. I wouldn't go add the framework just to accomplish this, but if you're making a game you're going to run in to a couple more instances where a library will make your life easier. In this case... getElementsByClassName is not available in IE, so you'd have to sub in an implementation of it for IE users. This is one trivial example of the headaches involved in writing complex javascript that works in all browsers.

edited Sep 12, 2011 at 18:46

answered Sep 12, 2011 at 18:40

Chris Baker

50.8k13 gold badges99 silver badges116 bronze badges

1 Comment

Conrad.Dean Over a year ago

Thanks for the note about cross-browser issues. That alone would push me to using a library that would take care of those issues for me. You're right, inline styling on the page trumps everything as far as CSS specificity goes.

Collectives™ on Stack Overflow

CSS specificity problem

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related