This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 5 months ago.
I'm using UI Library(Vuetify) and this is the code it has:
.sample[data-2] {
color:red;
}
and I want to overwrite all the elements having .sample classes like this:
.sample {
color:blue;
}
If i use '!important' then it surely works,
but I want better solution to overwrite .sample[blabla] class.
I've tried .sample[*], .sample[] ... it didn't work
You can increase the specificity of your CSS by including :not pseudo class with a # id name.
The id name needs to be one not used elsewhere.
div {
margin: 10px;
}
.sample[data-2] {
color: red;
}
.sample:not(#nonExistentId) {
color: blue;
}
<h2>All these lines should be blue</h2>
<div class="sample">a div with class sample</div>
<div class="sample" data-2>a div with class sample and attribute data-2</div>
<div class="sample" anyoldattribute>a div with class sample and any old atrribute</div>
See MDN for a fuller explanation.
In particular if you need to support older browser versions you could use combinations of :is, :matches and so on.
Related
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
CSS attribute selector for class name
(1 answer)
attribute selector for class starts with and ends with
(1 answer)
CSS attribute selector class starts with but not equals to
(2 answers)
Closed 3 years ago.
I set dynamically classes on elements with class names "displayIfYes_%%" where %% comes from a database and can have a lot of values.
I am trying to set a simpler CSS selector for the classes I don't want to display, but I can't find how to do it.
I have a working solution to display elements only when value is "yes" using this CSS:
.displayIfYes_yes {visibility: inherit !important;}
.displayIfYes_na,
.displayIfYes_no,
.displayIfYes_scaled,
.displayIfYes_raw
/* ... and so on for any additionnal value */
{display: none !important;}
I want a selector to select any element which has class which begins with "displayIfYes" but does not end with "yes".
you can use selector [attribute|="value"] in this case your attribute can be class.
So:
[class|="displayIfYes"]{
/* */
}
will select class attribute which starts with that. The only complication is class attribute can have more than 1 class so this solution might not always work.
In that case I recommend using different classes for different scenarios from the database. You can create a class for each scenario such as;
.na,
.no,
.scaled,
.raw {
/* other styles */
}
.displayIfYes {
display: none !important;
}
The traditional way to solve this problem is to use a “base” class, then override with more specific classes. In your case, this would be:
.display-if-yes {
display: none;
/* Other styles which apply to all types */
}
.display-if-yes-yes {
display: unset;
visibility: inherit;
}
<div class="display-if-yes display-if-yes-yes">Yes</div>
<div class="display-if-yes display-if-yes-no">No</div>
<div class="display-if-yes display-if-yes-other">Other</div>
If you are unable to change your class structure for some reason, this should work for your specific requirements:
.displayIfYes_yes {
/* visibility: inherit; */
color: red;
}
*[class^='displayIfYes_']:not(.displayIfYes_yes),
*[class*=' displayIfYes_']:not(.displayIfYes_yes) {
/* display: none; */
color: green;
}
<div class="displayIfYes_yes">displayIfYes_yes</div>
<div class="displayIfYes_no">displayIfYes_no</div>
<div class="displayIfYes_other">displayIfYes_other</div>
I’ve commented out your specific styles just for the sake of the demo.
Here's a solution without using the :not() selector, instead only relying on attribute and class selectors and the underlying specificity.
Also, you can't override display: none; with visibility: inherit. Use display: initial instead.
[class^="displayIfYes_"] {display: none;}
.displayIfYes_yes {display: initial;}
<div class="displayIfYes_yes">div.displayIfYes_yes</div>
<div class="displayIfYes_na">div.displayIfYes_na</div>
<div class="displayIfYes_no">div.displayIfYes_no</div>
<div class="displayIfYes_scaled">div.displayIfYes_scaled</div>
<div class="displayIfYes_raw">div.displayIfYes_raw</div>
This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have Html structure below
<div>
<div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
<div class="container"></div>
</div>
CSS:
.experimental-bar { height: 50px; }
.experimental-bar-minimal {height: 25px; }
.container { height: ~"calc('100vh - 50px')"; }
I want to change height of container when experimental-bar-minimal class is called
I have used
div:has(.experimental-bar) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 25px')";
}
Can anybody help me out. Thanks in advance
:has is not working
There is no < Selector in CSS, and there is currently no option to style a parent element depending on one of its childs. At least not with vanilla CSS, I am not sure if this could be achieved with a preprocessor like Sass, Less or Stylus.
There acually is a > Selector, which selects only direct childs of the parent node. Please read the MDN Documentation for further info.
Ther actually is the :has pseudo class, which works like the code below, but it is currently not supported by any browsers:
.parent:has(> child) {
/* Style Rules */
}
This question already has answers here:
Is the CSS :not() selector supposed to work with distant descendants?
(2 answers)
Closed 6 years ago.
Using CSS, I'm trying to target all ul elements inside the #include element, except for the ones inside the #exclude element. Here's the markup:
<div id="include">
<ul><li>Include List</li></ul>
<div id="exclude">
<ul><li>Exclude List</li></ul>
</div>
</div>
I thought I could do this using the :not CSS selector like this:
#include :not(#exclude) ul {
color: blue !important;
}
The result I'm seeing is that neither ul gets the blue color. Clearly I am misunderstanding how this :not selector works. Is what I'm trying to do possible? Here's a fiddle:
https://jsfiddle.net/flyingL123/gmpLgx4y/
You need to use the > operator. This gets the immediate children of the element preceding. This will then get the ul immediately descending from #include. Updated:
JSFiddle
Updated code:
#include > ul {
color: blue !important;
}
You would not be able to to implicitly set styles by inheritance. They don't exclude ancestors because they don't trickle down. You will need to add new rules for other elements like so:
#include ul {
color: blue;
}
#exclude ul {
color: black;
}
Fiddle: Here
This question already has an answer here:
Concatenating nested classes using SASS [duplicate]
(1 answer)
Closed 7 years ago.
I'm adding an 'down' class name to a div using js.
Is it possible in Sass to hit the 'down' class while styling the div
<div class="insight">
</div>
//add down class with js when clicked
<div class="insight down">
</div>
.insight{
background: gray;
height: 100px;
width: 100px;
&:down{
background: red;
}
}
As pointed out in the comments, you've used the wrong selector. In CSS : is a pseudo-element selector, for example span:hover, a:clicked, and so on.
You want an element with two shared classes, so . is fine:
&.down {}
will do exactly what you need. As you've noted & in SASS is the current scoped element so this will compile to
.insight.down
Which is valid CSS and exactly what you want.