Is the weight of first-line greater than that of first-of-type? I'm a little confused!
p::first-line {
color: green;
}
p:first-of-type {
color: blue;
}
h1:last-of-type {
color: red;
}
<div>
<p>p1contentp1contentp1contentp1contentp1<br>contentp1contentp1contentp1content</p>
<h1>h1hahaha</h1>
<h1>h1hahaha2</h1>
<p>p2content</p>
</div>
In my opinion, the first p-text should be completely blue.
::first-line is a pseudo element, which means that it behaves as if it is an element inside its parent, the p.
So CSS properties defined on the p don't even apply to the ::first-line, unless they are inherited.
In this case, the color property does inherit, but it is simply overridden by the color of the pseudo element.
Related
I thought that pseudo-classes inherited properties from their parent element, but in practice it seems the parent element specifically selects all its pseudo-classes, even if they're not specified.
Eg, given the HTML:
ok
and CSS:
#id-selector {
color: green;
}
a:any-link {
color: red;
}
I thought that color: green would only be inherited by the pseudo-class any-link, and thus be overriden by the a:any-link selector since this is a specific selector for the pseudo-class, and specific selectors override inherited properties even if they have a lower specificity. But the output of the above is a green link, indicating that #id-selector is specifically targeting any-link, not it being inherited.
An example of a specific selector with a lower specificity overriding an inherited property with a higher specificity:
HTML -
<div id="id-has-high-specificity">
<h1 class="class-has-low-specificity">Heading</h1>
</div>
CSS -
.class-has-low-specificity {
color: green;
}
#id-has-high-specificity {
color: red !important;
}
here the output is green, which is expected, since the heading is only inheriting from the second rule, but is being specifically selected by the first rule.
I thought this same thing applied to pseudo-classes, in that pseudo-classes inherited from their parent element. But it seems from my first example that they don't, and that rather the parent element specifically selects all its pseudo-classes, even if they're not specified.
Is it the case then that pseudo-classes don't inherit any properties from their parent element, but instead the parent element specifically sets all of its pseudo-classes whenever a rule for it is defined, even if those pseudo-classes aren't specified?
CSS ascertains which selector(s) 'win(s)' following a set of order of precedence rules.
For example, from MDN:
Selector Types The following list of selector types increases by
specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g.,
[type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
So in the example given in the question:
ok
and CSS:
#id-selector {
color: green;
}
a:any-link {
color: red;
}
The color does not turn to red because the id selector takes precedence, even though the setting for a comes after in the 'cascade'.
Here's a snippet where the color does change (for this example on a hover):
#id-selector {
color: green;
}
a#id-selector:hover {
color: lime;
}
a:hover {
color: red;
}
</style>
ok
UPDATE
From comments I'm wondering if there is some confusion about pseudo elements (and classes) - they are 'part of' the one element, they are not a child of a 'parent' element.
This snippet has a parent/child and in that case the specificity as assumed in the question works:
#id-selector {
color: green;
}
a:hover {
color: red;
}
<div id="id-selector">ok</div>
Some Javascript code changes the color of a certain element to which I created a pseudo-element. I want the latter to get whatever color its parent element gets (from JS). color: inherit applied to the pseudo element doesn't work though.
Why not and how to achieve this?
Actually color: inherit works just fine.
setTimeout(function(){
document.getElementById('d').style.color = 'green';
}, 1000);
#d {
color: red;
}
#d::before {
color: inherit;
content: "before";
}
<div id="d">text</div>
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.
Say you had a Css style defined below .
div
{
background: url(themes/default/images/backgrounds/lh-navigation.png) repeat-x;
}
.child
{
backgroud-color:#FFFFFF;
}
<Div id="tempDiv" class="child"></Div>
I don't want the backgroud style applied to element tempDiv. How can i remove the parent style for the a specified div element. Is there any way to make it ?thanks
In CSS children inherit properties from parents. You'll have to override the style of the parent in your child style declarations. In this case, since it is a background you are trying to override your .child style declaration will look like this:
.child {
background-image: none;
background-color: #FFFFFF;
}
As the others above have pointed out you could also expand on the selector and write a new rule for the id attribute on the element:
#tempDiv {
background: none;
}
try:
.child#tempDiv{
background: none;
}
note the absense of whitespace between the id and class since it is on the same element.
Why the following code results in red color rather than black ?
HTML:
<div class="error classA" att="A"></div>
CSS:
div {
width: 100px;
height: 100px;
}
[att=A].classA {
background-color: red;
}
.error {
background-color: black;
}
If I remove [att=A], it becomes black, as expected. Why is that ?
It's because of CSS Specificity. The 'red' rule is more specific (elements which have this attribute AND this class) than the 'black' rule (elements which have this class). When you remove the [att=A], they have the same specificity, but because the black rule is later in the file, it wins.
Because in CSS, specificity counts towards the "Cascade" too.
[att=A].classA targets an attribute and a class name.
.error only targets a class name
Because the first is more specific, it gets applied over top of the second.
If you want to forcefully override a previously applied style, you can use the !important declaration:
[att=A].classA {
background-color: red !important;
}
However, I should note, IE ignores the !important declarationhas buggy support for it, so use it with care.
The most specific selector wins, and [att=A].classA is more specific than .error. Without it, the last one declared in the CSS wins, for example:
.error {
background-color: black;
}
.classA {
background-color: red;
}
Would also result in red.