What's the use of the css selector body h1 instead of simply h1? can there be h1 tags anywhere else than within body?
body h1 has higher specificity (docs) than just h1.
That's the only difference (in a valid html page at least).
In practice, there's no difference other than the specificity of the selector you're using.
h1 {} will select all h1 elements.
body h1 will still select all h1 elements, but only those inside a body tag (which of course, they should always be).
If you have h1 { color:red } and body h1 { color:blue } then the higher specificity, blue, will supercede red.
This is more useful when you're dealing with nested DOM elements. E.g. ul li h1 { color:green }
Related
I am getting red background-color for both h1. For the first h1, ID has the highest precedence and for the second h1, the inline has the highest precedence. Why?
#myid { background-color: pink; }
.main h1 { background-color: red; }
div h1 { background-color: blue; }
h1 { background-color: green; }
<!-- the background-color expected
to be pink for the following h1 -->
<div class="main" id="myid">
<h1>This is paragraph one!</h1>
</div>
<!-- the background-color expected
to be brown for the following h1 -->
<div style="background-color:brown;" class="main" >
<h1>This is paragraph two!</h1>
</div>
Both of these have to do with whether the style is applied directly to the element or to the parent element.
In both cases, your intuition is correct for the outer div.main element. However, there are rules that apply to the h1s that, while less specific, apply directly to the h1s so they take precedence over the more specific rules that apply to the divs.
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Directly_targeted_elements_vs._inherited_styles
You are not applying the background to h1 element but to its parent element. Considering this, there is no specificity here because we only consider the rules applied to h1 and if no rules we consider inheritance (the styles applied to parent element that get inherited by childs). Also background is not a value that get inherited by default so inheritance will not apply here even if you don't specify a background to h1.
So in this case the red will always win because it's the rule with highest specificity applied directly to h1.
The pink background is present, but it's being hidden by the red background of the H1 that's sat on top of it.
If you add some padding to the #myid styles the you will see a pink outline around the red of the H1
Is it possible to apply certain CSS to any element, except descendants of a certain class?
Here's a fiddle: http://jsfiddle.net/68jgdthm
As you can see I want everything on the page to be dark except elements which are descendants of the light class. The trick here is that one can't know if the element is a direct descendant, e.g. it might be this:
<div class="light">
<p>Element</p>
</div>
but it might also be this:
<div class="light">
<div>
<div>
<p>Element</p>
</div>
</div>
</div>
The dark class is almost always added to the body element and will always be a parent of any light classes.
One might say:
Just make the body "light" and add dark classes to any elements you need. - But I actually need the opposite, I need everything to be dark and certain elements to be light.
Then add "light" styles and add the light class to elements you need. - I already have the dark styles, so I'm looking for an easier "excluding" solution (I'm using LESS, so prefixing etc. is quite easy).
You will not be able to exclude descendants this way without writing a separate selector. You won't be able to do this even using :not(), for the reasons stated here.
Fortunately, the fact that .light elements will only ever occur within the context of a .dark element and not vice versa makes this a little easier. Since you have a body CSS rule already, just add .light p to that rule, and move the entire ruleset underneath .dark p so .light p will take precedence:
.dark p {
color: #000;
}
body, .light p {
color: #ccc;
}
Updated fiddle
Alternatively if you want to keep the body rule on top, you could bump up the specificity of .light p to ensure it will take precedence:
body, body .light p {
color: #ccc;
}
.dark p {
color: #000;
}
Color is an inherited property. Therefore just by declaring .dark and .light to have the wanted color is a good thing. You can make a default by assigning it to the body. I think atomic design like this is a good practice, as you don't add too much specificity in your CSS.
You could do this:
body {
color: #ccc;
}
.dark {
color: #000;
}
.light {
color: #fff;
}
Demo: http://jsfiddle.net/68jgdthm/1/
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }
On the following page is body text, including some bullet text. I need the bullet text to be the same (larger) size as the body text.
http://www.a-quick-sale.co.uk/howitworks/
There is a global stylesheet in the site (/global.css) and I added an entry to it:
li { font-size: 14px;}
But that font-size style is not being applied. I don't want to start being lazy and applying styles directly to page context, but why is the global style I created not being applied?
I've not done any work with CSS or HTML for over a decade, so please be gentle - the answer is likely obvious to anyone with current skills.
Because div#content li is more specific than just a single type selector, you need to include elements that are higher up in the cascade to override the specifcity
Specificity can be thought of as four numbers (0,0,0,0)
Inline styles are the first - highest precedence
ID selectors are the second number
Pseudo-classes and attribute selectors are the third
Type selectors are the fourth
The universal selector * has a specificity of 0, anything will override it.
So just specifying li has a value of (0,0,0,1) vs div#content li which has a specificity of (0,1,0,1) the latter wins. Just use this concept to come up with a higher selector.
In the global.css file there is a more specific selector div#content li that has font-size selected inside of it. Be as specific with your selector, or more specific for it to apply throughout the content area.
In the same global.css, there is a div#content li { font-size: 12px;} which is applied, because it is more specific.
Try forcing the style, like this:
li { font-size: 14px !important ;}
So it gets priority over existent styles for that element.
If you use Chrome Developer Tools (F12) you can see which styles are being applied to each element, and even see styles being overridden as they are crossed out, very helpful for debugging CSS issues like this.
Because in the same file, at line 208 you define div#content li {font-size: 12px;} which is more accurate than just li.
I should say you need to apply styling to links itself, while it's not just a plain text inside li.
li a { font-size: 14px;}
On 108 line of your global.css you have a CSS rule div#content li { font-size: 12px;} that overrides your: li { font-size: 14px;} rule.
i have this CSS code:
h1 {
font-size:22px;
color:#341C12;
font-weight:normal;
font-style:italic;
}
.h1color h1{
color:#862E06;
}
and this HTML Code
<h1>News <span class="h1color">& events</span></h1>
but its not working. want i want to do is have the first h1 text to be color #341C12 and the other text to #862E06 with using only 1 h1 tag..
This:
.h1color h1{
Should be:
h1 .h1color {
The order is parent child, if you always just have 1 span, you could also leave out the class, and do:
h1 span {
The descendant selector .h1color h1 selects all h1 elements that are descendants of an element with the class h1color. But you need all elements with the class h1color that are descendants of an h1 element.
So just change the order of the selectors:
h1 .h1color {
color: #862E06;
}