css-specificity

Possible Duplicate: Points in CSS specificity Here's an example of what I mean: http://jsfiddle.net/BTJXt/9/ Somehow 1 ID will beat a seemingly infinite number of classes. How is this being calculated? <style> div { height:200px; width:200px; } #big .little { /* Specificy value = 110 */ background-color:red; } #big .little.little { /* Specificy value = 120 */ background-color:blue; } .little.little.little.little.little.little.little.little.little.little.little.little.little { /* Specificy value = 130, why doesn't this win? */ background-color:green; } </style> <div id="big"> <div class="little

I am working heavily in jQuery UI widgets and themeing is becoming hard because of an oversight that I need to work around. Consider this problem: <div id="node" class="ui-widget"> <div class="ui-widget-content"> </div> </div> then this jquery <script> $(function() { $('#node').hover(function (){ $(this).toggleClass("ui-state-error"); }); }); </script> I would like the ui-state-error to be !important to the nested div. This is pseudo code, but I find large examples of this happening where containers have css swaps and children (basicaly) ignore it. What is even worse is this: if I would like

I'm curious why using > or other combinators does not affect the specificity of CSS selectors, i.e. why div span (matching a span somewhere inside a div) and div > span (matching a span which is the immediate child of a div) are considered equal regarding the specificity. I do realize that the usage of combinators is completely irrelevant for the specificity but I wonder if there's a certain reason for it. Andrew This has actually been brought up in the working group mailing list, way back when, in this thread . It basically comes down to, yes, intuitively a selector with a combinator looks

If I want to increase the CSS specificity of a rule, I tend to prefix with html , but I wonder if there are more concise ways of doing this? (It may seem like a trivial issue, but over the course of my stylesheets defining a responsive grid, decreasing the specificity prefix by a single character would save a few hundred bytes) This really depends on what you're trying to achieve. A cheap way of increasing specificity is to simply repeat a selector. For instance, if this was your markup: <figure id="myId" class="myClass"></figure> And this was your CSS: #myId.myClass { color:red; font-weight

I want to change ☰ color. HTML: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="sr-only">Toggle menu navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> I tried various things (look bellow) but nothing works. CSS: .icon-bar { color: black; border-color: black; background-color: black; } The reason your CSS isn't working is because of specificity . The Bootstrap selector has a higher specificity than yours, so your style is completely ignored. Bootstrap styles this with the

Given the following code: * { font-size: 18px; } .container { font-size: 50%; } <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus. </p> </div> The result is that the <p> tag has 18px font-size applied. But shouldn't every element that is inside of the div container inherit the font-size I apply to it? Regardless of the * selector applying the font-size to the <p> tag, because a tag is only worth 1 point and a class is worth 10 points? The .container rule doesn't match

What do I need to do to give the [id^=value] selector the same specificity as a regular ID, and why isn't it equal or greater already? (considering that I gave it html as well) html div[id^="blue"] { background-color: blue } #blue4 { background-color: red } jsfiddle: http://jsfiddle.net/bjwe6yr0/1/ An attribute selector will always be less specific than an ID selector; its specificity value does not change based on the attribute name. Selectors only maps specific attribute names to class selectors and ID selectors; an attribute selector is a generic concept and does not contain any such

Several answers tagged css discourage the use of !important in favor of specificity. Why? There is actual math you can use to predict, control, and reverse-engineer the impact of CSS rules. By using !important you're breaking that. Look at this JS fiddle for example, which doesn't use !important : http://jsfiddle.net/hXPk7/ If you use Firebug or Chrome dev tools to inspect the title element where it says "Richard", you should see these rules, in this order: /**************************/ /* /hXPk7/show/ (line 20) */ /**************************/ #myExample #title .name { color: yellow; } /*******