I have a div within a webpage I am trying to target with the following code to create a flexbox:
div.my-div-class {
display: flex;
flex-wrap: wrap;
}
div.my-div-class > label {
fl
Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:
div {
display: inherit;
}
Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.
I check the console, and sure enough see:
div { display: inherit; }
instead of what was there before for the User Agent which was:
div {display: block;}
Which is what I assumed was messing with my style originally.
I tried !important to see if that would at least cause a change and it didn't.
So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.
Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:
<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>
Generally you don't really need to target the div tag, you should instead use a class.
If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.
To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.
Just target whatever you need to be flex with the class name, such as:
.my-div-class {
display: flex
}
It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.
If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.
For example:
.parentElement {
display: flex;
background: yellow;
height: 200px;
width: 100%;
}
.childElement {
display: flex;
height: 100px;
width: 70%;
background: blue;
}
.childElement:hover {
height: inherit;
}
<div class="parentElement">
<div class="childElement">
</div>
</div>
In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.
In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.
Related
Just wondering, can I make CSS inheritance skip a generation?
For example if I had this code:
Code:
.grandfather {
background-color: #fff;
}
.parent {
background-color: #333;
}
.child {
background-color: inherit;
}
<div class='grandfather'>
<div class='parent'>
<div class='child'>
Is there a way for the inherit command to take the background-color from the grandfather and completely ignore the parent? Or would i need to use a variable for that?
The short answer is no, you cannot. The inherit property always takes its value from its parent.
You can read more here: CSS inherit property
It touches on this issue with a specific note:
Note: Inheritance is always from the parent element in the document
tree, even when the parent element is not the containing block.
The simple solution is to have a class in the color you wish to use e.g. .blue {background: blue;} and add that into the HTML or use CSS custom properties (CSS variables) to effectively do that too.
Unset css property in css. Is it possible?
Let me explain the problem with the css code.
We have two classes at hand: .whenRolledUp and .whenRolledDown.
I want my element to comply with the following rules:
1 When an element with .whenRolledUp class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to disable the element. Otherwise, I would like to do nothing to the display of the element. I am able to satisfy this with the help of this css:
.rolledDown .whenRolledUp {
display: none;
}
2 When an element with .whenRolledDown class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to do nothing to the display of element. Otherwise, I would like to have display: none for the element. I am able to satisfy the second part using this:
.whenRolledDown {
display: none;
}
But here is the catch. I can not satisfy the first part by just using this:
.rolledDown .whenRolledDown {
display: block;
}
Because here I am actually setting the display to block, while it may have a different value without this css.
It seems like the problem is impossible to solve with only css. Is it so?
You can use display: unset:
The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not.
function add() {
document.querySelector('.target').classList.add('rolledDown');
}
.whenRolledUp {
display: none;
}
.rolledDown .whenRolledUp {
display: unset;
}
<div class="target">
<div class="whenRolledUp">whenRolledDown</div>
</div>
<button onClick="add()">Add rolledDown</button>
This is a follow-up question to - Override parent style if child element exists
As per suggestion and comments, :has is yet to be supported and there's no way to modify a parent's style if a certain child element exists.
Certainly not possible with just css alone.
I was thinking to pass down the z-index property to the child and unset it from the parent.
Here's what I've tried.
div#info {
z-index: unset !important;
}
div#info > div.label {
z-index: 109;
}
div#info > div.pop-up {
z-index: 110; /* Pop-up should always appear on top */
}
But still didn't work. Is this even possible?
The idea is: making the parent element have no style and z-index will be declared in the child elements.
NOTE: by just using CSS3, no scripts involved. HTML elements and style properties are generated by the API.
Finally got it working!
Given this HTML Structure:
<div id="info">
<div class="pop-up">...</div>
</div>
<div id="info">
<div class="label">...</div>
</div>
I just forced the parent to have no style properties and marked the z-index property for each child as !important
div#info {
z-index: unset !important;
}
div#info > div.label {
z-index: 109 !important;
}
div#info > div.pop-up {
z-index: 110 !important; /* Pop-up should always appear on top */
}
This works for my need. Not sure if it will be useful in general since a parent may have different styles that will be inherited by the child element.
Good thing I only have to worry just one property, the z-index.
Im trying to change the first child, when i hover on the second child. How do you do this with html and css only?
(With the tilde/~ i seem to be able to select childeren downwards in the html code, but not upwards. Do i have to use a different selector to go upwards?)
grtz
<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>
<style>
#box1 {
height: 100px;
width: 100px;
background-color: red;
}
#box2 {
height: 100px;
width: 100px;
background-color: lime;
}
#box2:hover ~ #box1 {
height: 300px;
width: 300px;
background-color: yellow;
}
</style>
General sibling selectors, this is what the tilde expresses, will only select the siblings following (not preceeding) the matched element.
The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
Reference: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
In your case there might be a CSS-only chance to archive this. Actually two ...
Chance 1
On parents :hover, change the children.
#container:hover div:first-child {
background-color: #cff;
}
In your case, this required #container to be display: inline-block;, otherwise the red box would change too, when hovering the empty area right to both boxes.
Bin: http://jsbin.com/dilitucije/1
Works in all modern browsers and most older browsers too.
Chance 2
I'd use flexbox with defined order to reverse the rendering of both items. Since the rendering order of elements is reversed but the DOM order is not, this works.
CSS:
.reversed {
display: flex;
flex-direction: column-reverse; /* reverse rendering */
}
#container div:hover:first-child ~ div {
background-color: #cff;
}
Explanation of the Flexbox rules:
use Flexbox (great explanation, W3C spec)
order the items in rows (the container is a "column"), reverse the order of the items within the .reversed container (first DOM node is rendered last, last DOM node is rendered first)
Add the class to your #container
<div id="container" class="reversed">...</div>
Bin: http://jsbin.com/piyokulehe/1
Works in FF 34, Chrome 39, should work in at least IE 11 too (probably not IE10).
Update:
Fixed wrong row-reverse (the example uses column-reverse, matches your requirement)
Removed unnecessary justify-content (since the items are rendered into rows, this is not necessary)
Added explanaition to the Flexbox solution
To achieved this on hover your element need to be the child of the element or comes after the element that is hovered.
The element whose styles are needed to be changed must be the descendent of the hovered element or comes next to it to work
Two parts to my question:
1) Is there a way to inherit another control's attributes and styles in CSS? Assume the controls have no parent/child hierarchy and can be completely different control types:
IE:
#MyFirstControl
{
width: 100px;
}
#MySecondControl
{
width: MyFirstControl.styles.width; /* This doesn't work */
}
2) Assume a Label tag is a child of any other tag. The width attribute will neither work with "inherit" nor "auto". What's wrong?
IE:
<style>
div
{
width: 100px;
}
</style>
<div>
<!-- This label does what it wants for width. It's not the width of the containing div -->
<label style="width: inherit">Some Text</label>
<div>
Part 1: you want to use class names, not ids, to control the styles:
.control_a {
width: 100px;
}
<blah id='MyFirstControl' class='control_a'/>
<blah id='MySecondControl' class='control_a'/>
This lets you share styles across any number of tags. Also, keep in mind, you can use more than one class name on a single element:
.control_a {
width: 100px;
}
.red { background: #f00; }
.blue { background: #00f; }
<blah id='MyFirstControl' class='control_a red'/>
<blah id='MySecondControl' class='control_a blue'/>
This lets you select many different sources of style for a single element.
There is no way to inherit CSS "objects". You can inherit styles from tags inside other tags, but it is the tag inheriting and not the style itself. If you place a tag inside a tag with another style, it will inherit from that style.
It might be interesting if CSS styles were treated as objects, as you could avoid a lot of coding, but since you can create a class that can be applied to disparate types of objects, and even apply multiple classes to a tag, it is more interesting than necessary.
I am not sure about the second question, but I would imagine it has to do with the fact you are applying to a tag name, and not using a class or id. I would have to play with it some more to see if I can figure something out.
1) Since CSS doesn't allow for self-reference you could have common aspects of two separate elements specified in the same style:
#MyFirstControl, #MySecondControl
{
width: 100px;
}
2) If my IDE and browser are to be believed, inherit is not a valid value for width in that context but I'm not sure why. That might be why your example doesn't work.