With this HTML code.
<div class="noote">
<p class="first admonition-title">Noote</p>
<p class="last">Let's noote.</p>
</div>
How can I set the color of Noote to be red with css?
I mean, how can I set something for (div class="noote") and (p class="first") under it with css?
Try this:
/*this will apply for the element with class first
inside the element with class noot */
.noote .first{
color:red;
}
/* If you wanted to apply a rule for both individually
you can do: */
.noote, .first{
border:1px solid red;
}
div.note{
...
}
Refers to the div element that has the class note.
p.first{
...
}
Refers to the p element that has the class first.
div.note p.first{
...
}
Refers to the p element inside note that has the class first.
In addition, if you want to set an element child without setting a class to it,
div.note p:first-child{
/* it refers to the first p that contains noote */
}
#amosrivera's got it.
It's worth nooting that descendant selectors require more CPU. I always use more specific rules where possible. So instead of
.noote .first{
backgorund:red;
}
You could say
.noote > .first{
backgorund:red;
}
A nominal difference in most cases, but still a good habit.
Really?
Descendant selectors are
inefficient... The less specific the
key, the greater the number of nodes
that need to be evaluated.
— Google "Let's make the web
faster" docs
And
Descendent selectors are a major slow
down to the Safari browser
— John Sykes, May 2008
Some performance tests show little impact, and most writers agree that it only makes a difference on very large documents.
But mainly, I'm just going with my programmer instinct — say what you mean, and no more.
Related
So.. I have this code:
<div id="slider">
<div class="current"><img id="img1" src="http://i.imgur.com/gWGqZly.png" /></div>
<div><img id="img2" src="http://i.imgur.com/mC1FD81.png" /></div>
<div><img id="img3" src="http://i.imgur.com/HFx9mqa.png" /></div>
</div>
As you can see the first div have a class named "current" and that's the div that i want to select. The divs are positioned on top of eachother with position: absolute;
My CSS:
#slider div {
position:absolute;
z-index: 0;
}
#slider div.previous {
z-index: 1;
}
#slider div.current {
z-index: 2;
}
I'm trying to give the first div, the one with class "current" a z-index of "2".
The selector i use for doing this is:
.current {
z-index: 2;
}
But that doesnt seem to work, that way the image wont appear on the top.
But if i instead write the selector this way:
#slider div.current {
z-index: 2;
}
Now it works.
And im a bit confused by this, doesnt those two selectors basically work the same way? What's the difference between them in this case?
Made a jsfiddle out of this https://jsfiddle.net/x1L4tfw4/5/ If you remove the "#slider div" part from the css selector you will see the difference.
You haven't stated that you have the #slider div selector in your CSS as-well.
This overrides the .current selector because its more specific.
This is a specificity issue. #slider div has a specificity of 101. #.current has a specificity of of 10.
#slider div.current comes in at 111.
The selector with the highest specificity is the one used. Now, how did I get those numbers?
The CSS standard says that you add numbers with an infinitely large base together to get it. In practice, you can think of it as being digits.
Tag names are worth one point.
Class names or attribute values are worth ten* points.
ID names are worth 100 points.
(and !important things are worth 1000 by the way).
So you add them up and see which has the highest number. That's the rule that gets applied. If two rules come with the same specificity, the one that appears last in the source code is the one that is used.
I said ten here for simplicity, but remember that the spec said infinitely large base (though browsers actually use base 256, fun fact). So ten classes do NOT equal one ID: a single ID is more specific than any number of classes (in theory).
The way you did the CSS is quite confusing . I Think you know that , these CSS do respect a straight forward system for ID and Class . Javascript Does care about ID . And Browser has their specific advantages for ID's . But CSS doesn't care about ID and class. Not until you pull this type of confusion .
Never use #id element .class in your stylesheet if you have more than one same <element-tag> in your markup. This will ruin the style .
This is due to the CSS specificity in the selectors that you're providing (or perhaps a third party library is providing). Here is a good resource to understand how CSS specificity and inheritance works.
Summary
Here is the key part from the linked article relating to how the different CSS selectors are related:
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
I've included their examples below to help understand how this works:
p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)
Your Scenario
Now for your particular case. The first selector you use is .current which according to the information above has a specificity of:
.current (0,0,1,0)
As #Admir Geri noted in his answer, you also have a selector #slider div which has a specificity of:
#slider div (0,1,0,1)
Since the specificity of your second selector outweights that of the first, the second takes precedence and therefore you don't see your changes.
Your last selector #slider div.current has the following CSS specificity:
#slider div.current (0,1,1,1)
Since this score outweights that of any other selector. Your changes will be displayed when using this selector which is why you see them on the screen.
I have a situation in which I load a style with a selector that should be prioritized over another.
The situation looks like the one in this fiddle, in which a specific id selector is not being prioritized over another one that uses a class that is under a specific id.
--HTML
<div id="cont">
<p class="hello" id="hello">I wish I was blue</p>
</div>
--CSS
#hello {
color:blue;
}
#cont .hello {
color:red;
}
Result is red text
I'm pretty sure this could be possible without using !important - which I really would like to avoid since this will be maintained by designers with no css skills for A/B testing. I want to make a selector for them that they will only edit it's properties.
Edit: To be clear, the #hello selector is injected to the page and I want to change it to one that actually works, but I don't want to change the other selector for that purpose. Of course if I have no choice I will, but it seems reasonable to be that this css is valid as it is and overriding that selector should be possible without modifying it.
Simply use the :not selector to exclude the #hello element.
Change the first to:
#cont .hello:not(#hello) {
color:red;
}
Demo Fiddle
More on :not from MDN
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
Alternatively- per the comments below, you can increase the specificity of the second selector whilst providing variations for various contexts:
#hello, #cont #hello, #hello.hello {
color:blue;
}
Demo Fiddle
I suggest you to add another id selector to the first set of CSS rules.
#cont #hello {
color:blue;
}
#cont .hello {
color:red;
}
DEMO http://jsfiddle.net/a_incarnati/53q74jah/
In this case the color was overridden in red because you were using just one id selector #hello and that it's less specific than a selector with 2 ids combined or one id and one class combined, like you have done:
#cont .hello {
color:blue;
}
One of the things to take into account when writing CSS code, it’s the concept of CSS specificity. Understanding well this concept will avoid you to have to use !important;
As Mozilla Developer Network defines it, specificity is nonetheless:
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
You can measure specificity counting how many selectors are present in a CSS statement.
CSS Specificity can be represented by 4 columns of priority:
inline=1|0|0|0
id=0|1|0|0
class=0|0|1|0
element=0|0|0|1
Left to right, the highest number takes priority.
You don't need two different selectors. You can keep one:
.hello {
color:red;
}
#cont .hello {
color:blue;
}
http://jsfiddle.net/vkftfj2n/4/
What is the best, most maintainable and readable approach to setting a CSS property as the default for given tags in a portion of a page with low specificity. Currently, I have a page which takes the global default font styling from a html selector in a separate global stylesheet. There is a large portion of my page (which has the class dash) which I want to have a different default font style.
The main issue with just setting .dash h1 { font.... } is that this has very high specificity. Every time I want to set a font style for an element which is a descendant of .dash, I need to refer to .dash. Since I am working around a modular design, where each component is developed independently, this is a very bad idea. An even worse solution would be to set !important or to use an ID, for obvious reasons. Obviously, we don't run into this issue when setting fonts for html h1, or any other tag since all tags have lower specificity than classes.
Is there a simple low-specificity approach to setting a CSS property for tags which are descendants of an element high up in the DOM, selected by a class such that it can be overwritten by applying font properties to and element selected by another class?
You can set font properties with a rule like .dash { font ... } and set font properties for elements inside the element so styled, because each element gets it font properties from the declarations that apply to it, rather than its parent or other ascendant.
For example, if you have
<div class=dash>
some content
<h2>some heading</h2>
some content
</div>
and you set
.dash { font-family: Cambria }
then there is no problem in setting
h2 { font-family: Calibri }
without referring to the dash class. The h2 element gets its font family from the latter rule, quite independently of the rule that applies to its parent.
Doesn't
.dash * { font
do what you need?
UPDATE after clarifying comments and fiddles ...
So, I had your question "backwards" because I thought you were trying to ignore specifics in the included html.
BUT I think my suggestion still works, no?
.dash * { color: red; }
.included-class { color: blue /* this will take precedence */ }
http://jsfiddle.net/zDVED/
Based on Harry Roberts article http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/#safely-increasing-specificity, I applied the same class repeatedly in order to increase the specificity of that selector above that applied to the portion (which itself is set simply as .portion-class tag).
See:
Harry Roberts: http://jsfiddle.net/csswizardry/3N53n/3/ - note use of .btn.btn on line 28.
mine: http://jsfiddle.net/Emsap/5/ - note use of .dash-heading.dash-heading on line 2
Note that I was, of course, wrong to think that the location of elements in the DOM was affecting the specificity.
Consider the following HTML markup:
<input id="foo" class="bar" name="baz">
Are the following selectors equal (or even valid):
CSS
input#foo.bar[name=baz] { }
input.bar#foo[name=baz] { }
input[name=baz].bar#foo { }
/* etc */
And is it possible to move the element name to, say, end?
Edit: I know what specificity is, I want to know in which order the tag, id, class and attributes need to be specified.
They are all valid, as they comply with the syntax of sequence of simple selectors. They are equivalent, since their meaning, including specificity, are defined in a manner that does not depend on the order of the components.
It is not possible to move the element name (type selector) to the end, for purely syntactic reasons. The spec says that a simple selector “always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence”. This is to be interpreted so that the type selector, if present, must appear first. This is natural since there would be no way to distinguish it from e.g. a preceding class selector (a space could not be used since it has a quite special meaning in CSS selector syntax: .bar input is a valid selector and means something quite different from input.bar).
Please refer the answer of #Jukka as OP seemed to have changed the meaning of the question by minor edit, but if anyone's interested in specificity question before edit, than please read ahead.
First of all, neither of the selectors make sense, to be true, they are over specific.
Your selector holds an id which will be unique, so defining class as well as attr=val is not required
(If you are not using the same id for other element in some OTHER document..)
If for some case, you need them, say to override, like... (makes sense)
input#foo.bar[name=baz] {
/* More specificity overrides the selector below */
}
input[name=baz] {
/* Styles here */
}
Are the following selectors equal - YES, they are equal as far as the specficity goes, they all return a score of 121
Credits
(or even valid) - Completely Valid
Does order of tag(Not relevant), id, class - NO, whatever the order of attributes are, it doesn't matter.
BUT
The order of your CSS declaration block in the stylesheet matters, the last selector will override common properties as all the three selectors have equal specificity.
Demo (All three will render green text, regardless of the order of their attributes, but if you shuffle the CSS selectors block, the last one will override the common properties of previous two selectors - unless you define !important in one of the selector properties)
And is it possible to move the element name(Attribute) to, say, end? - YES
Pros & Cons —
All the selectors are overspecific
Bad as far as performance goes
Using attr=val selector, you are assuming that the value of the name attribute won't change, if it does, you will have to change your selectors as well.
P.S : Have an habit of quoting the attribute values.
Those are all legal:
<input type-"text" id="foo" class="bar" name="baz">
input#foo.bar[name=baz] { border:1px solid blue; }
input.bar#foo[name=baz] { border:1px solid red; }
input[name=baz].bar#foo { border:1px solid green; }
http://jsfiddle.net/hGj5B/
Remove the various style blocks and note that each selector will select the textbox.
By "equal", if you are asking is they have equivalent specificity, then the answer is yes given each selector has the same amount of elements, classes, attribute selectors, and ids. Since they are all equal, the order of the blocks in your stylesheet will serve to determine which conflicting styles will win out.
You cannot move the element to the end, as the other segments of the selector describe it by coming after.
Yes all of them are legal , But while execution the Later one Will over ride the Earlier Declarations,but some exceptions are there
check the Flow exceptions Here
input[name=baz].bar#foo { border:1px solid green; }
input.bar#foo[name=baz] { border:1px solid red; }
input#foo.bar[name=baz] { border:1px solid blue; }
input { border:1px solid #000000; }
http://jsfiddle.net/hGj5B/
for More Details Refer this Question..
The sequence of execution of CSS
I am trying to change the font for the whole page in HTML. By whole I mean everything: buttons, forms, etc. Is there a way to do this in CSS?
html {
color: green;
}
This would make the text green, but not the text of buttons.
Well, there's universal selector:
* {
color: green;
}
Take note, though, that specificity of this selector is the lowest (MDN).
Wild card selector
* {
color: green;
}
It may be the case that you need to over ride inline CSS and javascript generated CSS. In this case use !important as well
* {
color: green !important;
}
Use the * universal CSS selector.
The universal selector matches any element type. It can be implied (and therefore omitted) if it isn’t the only component of the simple selector.
The selector div * will match the following em elements:
"Universal" in the h1 element ( matches the <h1> )
"emphasize" in the p element ( matches the <p> )
"not” in the first li element (matches the <ul> or the <li>)
"type” in the second li element (matches the <ul> or the <li>)
Example:
This rule set will be applied to every element in a document:
* {
color: green;
}
Also to add, it's compatible with most browsers, although it can be buggy in Internet Explorer 5.5, 6.0, 7.0.
If you don't need to support IE < 8, and want something that's less smelly, set an explicit color only on html and force everything else to inherit the color. Colors are already inherited by default on most elements, but not all of them.
Since this means applying two different color declarations, you will need two separate rules:
html {
color: green;
}
body * {
color: inherit !important;
}
Honestly, you shouldn't rely on a wildcard selector for doing this. You should take advantage of CSS's native inheritance. The best thing to do would be to remove the specific color declarations from your stylesheet (as needed) and add the color to your body or html tag. Using a wildcard is similar to this, except you are declaring that every single element should have the CSS as apposed to the native inheritance.