Is there any difference between those three CSS rules ?
* {
font-size: 24px
}
:root {
font-size: 24px
}
html {
font-size: 24px
}
Yes there is a difference. Below some examples where the result isn't the same
Using *
* {
font-size: 24px
}
p {
font-size:2em;
}
<div>
<p>some text <span>here</span></p>
</div>
Using html (or :root)
html {
font-size: 24px
}
p {
font-size:2em;
}
<div>
<p>some text <span>here</span></p>
</div>
Applying font-size to all the elements is different from applying the font-size to the html element and having all the elements inherit the value.
In the first example, span will have a font-size equal to 24px because it was selected by *. In the second example, span will inherit the computed value of p since no selector is targetting it.
between html and :root there is a specificity war where :root will be the winner:
html {
font-size: 999px;
}
:root {
font-size:24px;
}
<div>
<p>some text <span>here</span></p>
</div>
:root {
font-size:24px;
}
html {
font-size: 999px;
}
<div>
<p>some text <span>here</span></p>
</div>
All of them will affect your whole HTML. You can even use a forth option, that would be html * { }, that would work on all of your HTML.
Their meaning are:
The * means that will select all elements - as per CSS * Selector.
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.
You can get more example and information on this post from the Community: How to Apply global font to whole HTML document.
Hope this helps!
If we have something like this, with all of *, :root and html together as below
*{
background: green;
}
:root{
backgroud:yellow
}
html{
background:black
}
h1{
background:blue
}
</style>
</head>
<body>
<h1>This is a heading<span>Cow</span></h1>
</body>
The specificity is as below
:root(yellow) >html(black)>*(green)
Related
I would like to add padding-top: 20px; between h3 and body but not if h3 is preceded by another element (e.g., h2). Is this possible?
Adding padding-top to all headings gives the desired padding when a heading is preceded by body text but an undesired padding between headlines:
Note that this document is Rmarkdown created using knitr, so I don't have full control over all the html. A pure CSS-solution would be preferred.
UPDATE:
To anyone also using knitr for Rmarkdown, the solution turned out to be a rather complex targeting:
/* First h2 following h1 */
.level1 > .level2:nth-child(3) > h2 {
padding-top: 0px;
}
/* First h3 following h2 */
.level2 > .level3:nth-child(3) > h3 {
padding-top: 0px;
}
Looking at the generated HTML, I learned that the first h2 after a h1 was in the third element in level1 and that that element was called level2. Similarly for the first h3. This is what is targeted above. The structure is probably different in other documents so take a look yourself.
How about
body > h3:first-child {
padding-top: 20px;
}
That will affect only immediate child of body with a header3, with nothing in between.
Thanks to #Oram, for pointing out missing :first-child
You can use the > selector plus :first-child to target only a direct h3 child.
* {
margin: 0;
padding: 0;
}
.test {
background-color: #cccccc;
margin: 10px;
padding: 10px;
}
.test > h3:first-child { color: red; }
<div class="test">
<h3>Targeted h3</h3>
<p>Paragraph</p>
<h3>h3 not targeted</h3>
</div>
<div class="test">
<p>Paragraph</p>
<h3>h3 not targeted because of the p tag</h3>
<h3>h3 not targeted</h3>
</div>
Try this:
body > h3:first-child {
padding-top: 20px;
}
It will only apply the CSS to the first direct child of the body which is a h3.
Why is the computed font-size 22.08px(1.38em) rather than 16px?
.stec {
font-size: 16px !important;
}
#content p {
font-size: 1.38em; /* why does this override !important? */
}
<div id="content">
<div class="stec">
<p>some paragraph text</p>
</div>
</div>
16px is !important but it's not being applied. Here's the computed style window from the Chrome debugger:
Inherited styles have a very low precedence. From the MDN:
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
So, that's your problem; .stec and #content p don't target the same elements. #content p overrides the style inherited from .stec.
Consider the following example. You might expect the paragraph text to be red, inherited from its div parent... but it's not:
div {
color: red !important;
}
p {
color: blue;
}
<div> <!-- !important is applied here -->
This text is red.
<p>Were you expecting this text to be red too?</p> <!-- not here -->
</div>
It's also not about specificity, as others have mistakenly suggested. It's about whether the rule actually targets the appropriate element. Consider the following example:
p {
color: red !important;
}
#test {
/* this is the more specific selector, yet it's overridden by !important */
color: blue;
}
<p>red</p>
<p id="test">were you expecting blue?</p>
p and #test both apply directly to the second paragraph; so, there's an opportunity for !important to override something.
I want to apply:
.page-item-124 a {
font-size: 15px !important;
font-weight: bold;
}
to all page items (classes starting with page-item) there are.
How can I do that?
You can use CSS3 [attribute*=value] Selector like this
Demo: https://jsfiddle.net/2Lzo9vfc/180/
HTML
<div class="page-item-1">Lorem ipsum</div>
<div class="page-item-2">Lorem ipsum</div>
CSS
div[class*="page-item"] {
color: blue;
font-size: 15px;
}
You can use the starts with (^=) or wildcard (*=) attribute selector for that:
[class=^page-item] { font-size: 15px !important; font-weight: bold; }
This will select among others these elements:
<p class="page-item-123"></p>
<section class="page-item-intro"></section>
You might want to narrow it down a bit. Eg only select div elements.
div[class^=page-item] { ... }
See also selector documentation and the fiddle demo
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
I currently have some general purpose H1, H2, H3 styles for my site which work great for most 'general' headings where I need a simple 'traditional' header.
h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
I am also creating some components where I have something like this, thats to say I need a header specific to that particular type of control.
<div class="titledimage"><h1>Section header</h1><img .../></div>
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
The problem I'm encountering is that the h1 under titledimage is also an h1 as defined earlier so it inherits all the styles defined by h1. This is generally undesired - I just want red and 1px solid blue for the header in the .titledImage div.
I was reading and trying to answer this question about H1 styles. My conclusion is that if you are doing specific header styles (.titledimage h1) you cant really do generic header styles (h1) unless :
a) you reset every style attribute in the '.titledimage h1' style
b) you just use a class name instead of h1
c) your `h1` style is defined with very few attributes that you'd
be overriding anyway
I've noticed that for styling the YUI menu control they actually use H6 and I'm wondering if they are doing that to avoid such conflicts.
Should I
a) be using <h6> like yahoo does?
b) reset every attribute defined by `h1` when I define `.titledimage h1` ?
c) just use a class name for `.titledimage header`, and leave
`h1`, `h2`, `h3` for 'traditional more logical headers'
d) something else
ideally i want to say this, but theres no such thing (to my knowledge)
.titledimage h1 { inherit: none; color:red; bottom-border: 1px solid blue; }
To me resetting seems wasteful. There must be a clean way to apply the /* lots of style attributes */ to the h1 tags you want it applied to while not having it apply to the h1 within a .titledimage.
Say you had:
<div class="top"><h1>PageName</h1></div>
<div class="leftNavigation"><h1>Cat1</h1><h1>Cat2</h1><h1>Cat3</h1></div>
<div class="rightMarginNote"><h1>Username</h1></div>
<div class="content">
<h1>CONTENT</h1>
<div class="titledimage">
<h1>title</h1>
</div>
</div>
Then you'd want your CSS a little like:
.top h1, .leftNavigation h1, .rightMarginNote h1, .content > h1 {
/* lots of style attributes */
}
.similarly h2 { /* lots of style attributes */ }
.similarly h3 { /* lots of style attributes */ }
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
Instead of the alternative
h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
.titledimage h1, .otherCase h1, .anotherCase h1, yetAnotherCase h1 {
/* lots of style backtracking */
}
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
.otherCase h1 { color:blue; bottom-border: 1px solid blue; }
.anotherCase h1 { color:green; bottom-border: 1px solid blue; }
.yetAnotherCase h1 { color:mauve; bottom-border: 1px solid blue; }
Also group as much of that H1-H5 stuff together as possible, and if you must go with the alernative define a class specifically for the resetting that is applied not to the h1 but to the containing div of any class.
<div class="titledimage hReset"><h1>title</h1></div>
Well the simple solution is not to nest an h1 tag ie:
<div class="different-header-style">Some Header</div>
If h1 doesn't have the desired styling you want then why use it?
Also, better than nesting it in a div just for style I would do this:
<h1 class="special-header">Some Header</h1>
h1 is a block element that you can style just like a div (border, width and so on) anyway.
b) reset every attribute defined by
h1 when I define .titledimage h1 ?
The problem with this approach is that you can't reuse the reset styles for other headers with specific styles, e.g.
<div class="titledimage"><h1>Section header</h1><img .../></div>
<div class="titledimage"><h2>Section header</h2><img .../></div>
<div class="otherimage"><h1>Section header</h1><img .../></div>
I think a better approach would be to define your resets in a separate class
.hreset {
/* Reset the header styles here */
}
You could then reuse these resets whereever necessary, e.g.
<div class="titledimage"><h1 class="hreset">Section header</h1><img .../></div>
<div class="titledimage"><h2 class="hreset">Section header</h2><img .../></div>
<div class="otherimage"><h1 class="hreset">Section header</h1><img .../></div>