This question already has answers here:
Why doesn't my child element inherit color from its parent when parent has more specific selector?
(4 answers)
Closed 3 years ago.
Probably missing something really simple here as I am quite new to this -- but, I don't understand why, in the below code, the <a> and <h2> elements do not inherit the color property (white) from the .hero class. Simplified the code as much as possible.
The HTML:
<section class="hero container">
<h2>A header!</h2>
<p>Some stuff!!!</p>
Linky
</section>
The CSS:
a {
color: #648880;
}
h2 {
color: #648880;
}
.hero {
color: #fff;
}
The result of this code is that the <p> element has text w/ color #fff, as specified in the .hero class -- which is as expected. However, the <a> & <h2> elements have color #6488880, as specified in the element selectors for <a> & <p>.
Same issue demonstrated in JSFiddle here
Shouldn't the .hero class's color attribute be overriding the color attribute in the element selectors? Am I completely misunderstanding specificity somehow? Of course I can use .hero a or .hero h2, but I don't see why I have to.
Why would you expect a property specified on a parent to override one specified on a child?
Specificity refers to a way to prioritize rules selecting the same element. The specificity of a rule on a parent (.hero) has no relevance to the specificity of a rule on its children (a).
In this case, the default color on the a element is inherit. However, you explicitly specified a different color. No amount of specificity or !important on the parent can cause it to override an explicit color specified on the child.
You set the elements to a specific color. Setting the color of the parent won't override that. You need to be more specific about those elements.
.hero a,
.hero h2{
color: inherit;
}
This article may help.
Related
This might be a silly question, but I don't understand why the display property (per the following link: https://www.w3.org/TR/CSS22/propidx.html) is not listed as inherited.
Yes, <strong>strong</strong> will stay inline (and will not turn into block) if we put it inside <p>sentence</p>, but what about display: none? It seems that display: none is a special case and in such a case the value is inherited? And so when we talk about the display property we should say that it is not inherited except when its value is none, right?
Also, are there other such properties and values? I mean the ones that are inherited in most cases, but not in all cases.
Example 1:
<style>
p { display: block; }
strong { display: inline; }
</style>
<!-- `aaa` will stay inline -->
<p>foo <strong>aaa</strong> bar</p>
Example 2:
<style>
p { display: none; }
strong { display: inline; }
</style>
<!-- `aaa` will disappear, so I think it has inherited `display: none`
from its parent. -->
<p>foo <strong>aaa</strong> bar</p>
It's because of the way display:none is defined.
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either
The child elements aren't inheriting display:none from the parent element.
If they were, a child element with display:block !important would cause a contradiction. The parent element would not be displayed, but the child element (inside the parent) would be, so the child should both be displayed and not displayed at the same time.
here is the simple html sample:
<div class='parent'>
parent div
<div class='myDiv'>
child div
</div>
</div>
I want change child div style based on parent property style. I do not want to use #media for child. But e.g. once parent changes its background color to something specific then I want change child background color, e.g. change child background only if parent changed to RED. Is that possible?
Yes, but neither with CSS or Sass, since Sass is based on CSS and the latter does not support conditional statements (yet). You will have to use Javascript instead.
You can however apply a certain styling to a descendent if a certain selector matches the parent.
// HTML
<div class="red">
Parent
<div>
Child
</div>
</div>
// SCSS
.red {
background-color: red;
> div {
color: green;
}
}
https://codepen.io/LudwigGeorgImmanuel/pen/abmPJmZ
HTML
<div class='container'>
<p>foo</p>
</div>
CSS
.container {
color: red;
}
p {
color: blue
}
Code Pen
The applied color is blue. Why is this? I was thinking that since .container has more specificity than p, the color would end up being red.
What is happening here? Why is it blue?
My hypothesis is that the process is "Does p have any selectors? If so use it and don't look up for .container. If it didn't have any styles, it'd look up and use the style for .container."
From the MDN page on Specifity
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
Hence p will override .container no matter what. The inherited style from .container is overwritten
think of the css in this specific case as a target bulls eye.
you start from the most specific pointer to your element in question.
in your example above, it is the p selector since the text is within the p tag wrapper. then going outward from that (the ring right outside the bulls eye, if you will) is the .container div. since the target p is closest to the text you want to color, it inherits that css (color text of blue).
in the example below:
.container {
color: red;
}
p {
color: blue
}
<div class='container'>
i should be red text since im outside the p tag but inside the div container
<p>foo</p>
</div>
you see that the text "i should be red...." doesnt necessarily have a "bulls eye" css, so it goes one ring outside and sees .container and is assigned the color red.
========
now to answer your question about specificity
specificity applies to a case like the example below:
.makeMeBlue {
color: blue;
}
.makeMeBlue.actuallyMakeMeRed {
color: red;
}
<div class="makeMeBlue">i am some random text</div>
<div class="makeMeBlue actuallyMakeMeRed">some more text here</div>
in the above example, you see that make .makeMeBlue has css to make the color of the text blue. however, the second .makeMeBlue div's text color is red. this is because we were more specific about targeting the second element. we used the selector .makeMeBlue.actuallyMakeMeRed utilizing both classes of the element to say "this is the element i want to target specifically and assign this css to".
so instead of the element being like "developers are blue, ok i'll be blue" it sees "hey, someone just said all developers who are named 'jason' are red, and my name is jason and i'm a developer - it is more specific to me, so i'll be red".
i hope that explained specificity a little more clearly.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is this possible with css only? I have the following:
<div class="container">
<img src=#>
</div>
How do I get .container to have a box-shadow (and other styling) when and only when img is in the state :hover?
As people have stated there is no CSS parent selector, for a number of good reasons as stated in the linked duplicate question.
However, with the code you've shown, you can just apply the hover pseudo-selector to your parent element and it will achieve almost the exact same functionality.
So this:
div:hover{
border:1px solid red
}
Would work only because you have a single child, and would have the issue that if you hover adjacent to the img but not directly on it the parent will still have styles applied because its a block element.
You can convert it to inline-block to limit this, like so:
div{
display:inline-block;
}
div:hover{
border:1px solid red;
}
However, this will have implications for how other sibling elements to the parent flow.
You can use jQuery:
$("span").hover(
function () {
$(this).parent().addClass("add-class");
},
function () {
$(this).parent().removeClass("add-class");
}
);
Here is the demo http://jsfiddle.net/Sv6Av/
You can replace span with another tag such as img
Nope. No parent selector in css yet. You will have to resort to js for now. For more explanation read this
Looking through style sheets from popular & unpopular websites I have found the div selector included in them. The bottom four examples were taken from the style sheets of the popular sites Stack Overflow, Github, Youtube & Twitter:
div.form-item-info{padding:4px 0 4px 4px;width:80%;color:#777;}
.searchFooterBox div span.smallLabel{font-size:14px}
#readme.rst div.align-right{text-align:left;}
.hentry .actions>div.follow-actions{visibility:visible;text-align:left;}
I find that I can design fully functioning CSS style sheets with out using the div selector so the question is:
What is the div selector's function?
&
Why do so many developers use it?
EDIT:
To be clear, when using the div selector, what does it mean when div appears before an id or class?
For example:
div.foo { color:black; }
div#bar { color:gray; }
And what does it mean when div appears after an id or class?
For example:
.foo div { color:black; }
#bar div { color:gray; }
When the div selector appears after an id or class does it have to have another selector appear after it?
For example:
#foo div span { color:black; }
#foo div p { color:black; }
Being more explicit in your selector makes it easier to remember what the HTML structure is like. Months down the line I can read the CSS and based on my explicit rules I can automatically map the structure in my head without going back to the HTML.
By specifying the node name before the class or ID, the rule becomes more specific. If you want to override .foo { color:black; } for a div that has a class of foo, just do div.foo { color:red; }. Paragraphs that have a class of foo would be black, while divs would be red.
It can be useful if you want to serve different css rules based on HTML structure. In the rules below, Any span inside a div is red. Any direct span under #foo is blue.
CSS:
#foo div span { color:red; }
#foo span { color:blue; }
html for that:
<div id="foo"><span>blah</span> <div><span>blah</span></div> </div>
Live demo that you can play around with: http://jsfiddle.net/6dw2r/
EDIT:
div#foo matches a div with an id of foo.
div#foo div means any div descendants of #foo.
No. It doesn't.
Please read http://www.w3.org/TR/CSS2/selector.html#pattern-matching for further questions.
div.form-item-info{...} // all div elements that have class~=form-item-info
.form-item-info{...} // all elements that have class~=form-item-info
In HTML and XHTML, <div> and <span> are generic container elements. <div> is a block-level element. <span> is an inline element.
Most other elements (<h1>, <p>, <strong>, etc.) have specific semantic meanings. It's bad practice to use, say, a <p> element for something that's not a paragraph. But <div> is just a container.
If you need something to be purely decorative, or to group related elements, <div> is a good choice.
The tag defines a division or a
section in an HTML document.
The tag is often used to group
block-elements to format them with
styles.
http://www.w3schools.com/tags/tag_div.asp
They're just being explicit about their selectors, which tends to be a good thing, as you're being more specific when addressing the elements to be styled. (Smaller chance of conflicts and unintended styling.)
div.foo { rule }
div#bar { rule }
This means the rule only applies to div elements with class foo or id bar, and the rule would not apply to non-div elements with class foo or id bar.
.foo div { rule }
#bar div { rule }
This means the rule applies to all div elements inside any element with class foo or id bar. This is called a descendant selector.
#foo div span { rule }
#foo div p { rule }
When a div selector appears after an id or class, it is not required to have another selector after it. If there is such a selector, the rule will apply to the selected elements only if they are inside a div element which is inside an element having id foo.
You may want to read up on your selectors here:
http://www.w3.org/TR/CSS2/selector.html