css-specificity

When using Cascading Style Sheets I have observed the order of specificity as follows: 1st Laws : In-line Styles 2nd Laws : Number of ID Selectors 3rd Laws : Number of Class Selectors 4th Laws : Number of Element Selectors So, items with in-line styles came first, followed by declarations with one or more ID selectors, followed by declarations with one or more class selectors, followed by declarations with one or more element selectors. With more IDs, classes and elements meaning more precedence, respectively. From this viewpoint I was unable to comprehend where comma delineated lists of IDs,

When viewing the code below in my browser the background is white. The universal selector * has the lowest specificity , and the body selector comes after the universal selector. Shouldn't it be grey? * { background-color: white; } body { background-color: grey; } Let's break down the code in the question: * { background-color: white; } body { background-color: grey; } This is saying: Select every element and make its background color white. Select the body element and make its background color grey. Well, if the universal selector says select all elements , this would include the root element

Take a look at this jsfiddle: http://jsfiddle.net/ZNddz/ .intro:first-letter { font-size: 130px; } span.letter { background-color: red; font-size: 30px; } p { font-size: 80px; } The first rule consist of one class selector and one pseudo-element selector = 11 The second rule consist of one class selector .letter and one tag selector span = 11 Both rules have same specificity so it is reasonably to believe that the winner should be the last style. Obviously it is not the case. So I decided to add a background-color property to the second rule and as you can see it has a height of 30px. I deduce

Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below: .foo { margin-right: 10px; } .bar { margin-right: 0px; } Which class will have specificity? Will the margin be 10px or 0px? Rion Williams It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles. CASE 1 .foo { background : red; } .bar { background : blue; } class = 'foo bar' would be blue in this instance. CASE 2 .bar { background : blue; } .foo { background : red; } class = 'foo bar' would be red in this

My main goal is to try to reorder a CSS style block based on specificity. I previously had helped from SO and I managed to produce this function. See gist . Here is an example: function specificity($selector){ // https://gist.github.com/2774085 } $compare = function($a, $b) use ($specificity) { return $specificity($a) - $specificity($b) }; $array = css_array(); uksort($array, $compare); The above has been working great until I came across this CSS: html, body, body div{ background: transparent; } body { background-color: #D96F02; } This gets reordered into this: body { // 1 point background

Given two classes of equal specificity defining the color property I thought the last class listed in the element class attribute would take precedence. From http://htmlhelp.com/reference/css/structure.html : Order of Specification To make it easy, when two rules have the same weight, the last rule specified wins. In the following vacuum code example the order in which the class rule set is defined determines precedence. Here the last, or most recent, class rule set definition takes precedence. <style> .makeBlue {color: blue;} .makeGreen {color:green;} </style> <div> <p class="makeGreen

Inside a Custom Element because border-color is set on the parent page, I can not make border-color work without resorting to !important :host([player="O"]) { color: var(--color2); border-color: var(--color2) !important; } The selector works fine, the color is set, so it is a Specificity issue Question: Is it possible without !important ? Working snipppet: window.customElements.define('game-toes', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = 'Toes'; shadowRoot.appendChild(document.querySelector('#Styles')