This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
Related
This question already has an answer here:
How to prevent CSS color property applied from parent class to child classes
(1 answer)
Closed 4 months ago.
How do I style .parent with color redwithout styling .child?
One solution would be to overwrite the child element style, but in the real world scenario, the child element will have many complex styles and I do not want to touch them, or overwrite these styles, it would be very risky.
What I want is to add the styles only to the wrapper element. In the real world these two elements will be <table> elements
<div className="App">
<div class="parent">
Parent
<div>
<div className="child">child - don't style me</div>
</div>
</div>
</div>
This is how I solved it:
https://developer.mozilla.org/en-US/docs/Web/CSS/all
.wrapper {
color: red;
}
.child {
all: initial;
}
There are other variants, such as revert-layer
This may be the best way to not inherit styles from specific cascade style layers without having to depend/know what are these styles to avoid having them overridden.
Working example: https://codesandbox.io/s/sharp-goldstine-9hongm?file=/src/App.js
In case you want to reset the property in child, you can use unset.
Eg:
.parent {
color: red;
}
.child {
color: unset;
}
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.
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I would like to apply style on an element which is between 2 other elements (siblings) - see below - on the img which is between the label and input.
I can use the + operator for the selector of the siblings, but I want the style to be applied on the second element out of the three.
HTML:
<label class="field-name">XXXX</label>
<img class="validation-mark">
<input type="text" class="ng-invalid">
CSS:
label + img.validation-mark + input[type="text"].ng-invalid
{
display: inline !important; //I need this style to be applied on the img
}
You want to select the image, which is next to the label right?
If yes, you can use the adjacent sibling combinator selector:
An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
These selectors can help you apply styling in a contextual way.
label + img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
If it's not the case or the specific requirement, I would suggest you to just select the image itself and apply the style to it:
img.validation-mark
{
display: inline !important; //I need this style to be applied on the img
}
Also, if you are using sass, like you tagged, you can do it like this:
img
{
&.validation-mark {
display: inline !important; //I need this style to be applied on the img
}
}
First thing, why don't you directly use class for applying styles.
.validation-mark{
display: inline !important;
}
And if you have to find 2nd element, you can also use JQuery.
$(label.field-name).next('img.validation-mark').css({'display': 'inline !important'});
Make it simple, it'll apply display: inline !important; on both image and input. Thanks
label + img.validation-mark,
label + img.validation-mark + input[type="text"].ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; only on img.
.validation-mark {
display: inline !important;
}
If you want to apply display: inline !important; only on input.
.ng-invalid {
display: inline !important;
}
If you want to apply display: inline !important; on all Elements.
label,
img,
label {
display: inline !important;
}
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I'm trying to find some text inside an element using a css selector, but not include the children of the element. For example:
<div id="information">
This is the text I need
<div>I don't want this text</div>
<span>I also don't want this</span>
</div>
Any ideas?
NOTE: I'm parsing a page so I don't have control over the elements
Apparently not possible using CSS Selectors. With XPath though, if someone is interested:
//div[#id='information']/text()
So you want the loose text inside of #information but you don't want the div and the span? Seems quite simple:
#information {
/* property values */
}
#information > div {
display: none; /* removes content of child div */
}
#information > span {
display: none; /* removes content of child span */
}
I guess you don't really even have to use the child (>) selector, too.
There is no CSS selector to select just the text content of an element. There is nothing illogical about the idea (CSS could have a pseudo-element for the purpose), but currently there is no specification or even draft on such matters.
What you can do is to set styles on an element and then override them on any child element, possibly using a selector like #information * that matches all descendant elements or #information > * that matches all child elements.
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
Trying to make information about image below it. But have A problem... Pseudo element is not visible..
<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>
div {
height: 100px;
margin: 10px;
background: yellow;
}
div[info]::after, img[info]::after {
content: attr(info);
display: block;
margin: 3px;
color: black;
font-style: italic;
}
Jsfiddle DEMO
Thanks.
img elements can't have pseudo elements, because they can't have children—::before is inserted within the element. It would look like this:
<img><before></img>
Or at least itt isn't defined by the spec
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.