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>
Related
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.
I want to do something like this .horizontal-nav:not(.horizontal-nav.responsive-nav-enabled)
i.e. I want to apply styles of .horizontal-nav only if the div does not have the .responsive-nav-enabled class. If it has both classes then the styles of .horizontal-nav must not apply. Is it possible?
You need to use .horizontal-nav:not(.responsive-nav-enabled) to get the desired result:
.horizontal-nav {
height: 20px;
border: thin solid;
}
.horizontal-nav:not(.responsive-nav-enabled) {
background-color: red;
}
<div class='horizontal-nav'></div>
<div class='horizontal-nav responsive-nav-enabled'></div>
The problem with your original selector is that it is invalid and rejected by the browser. :not accepts a simple selector while .horizontal-nav.responsive-nav-enabled is a sequence of simple selectors.
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 answers here:
Can the :not() pseudo-class have multiple arguments?
(5 answers)
Closed 8 years ago.
I'm trying to use the :not() property to exclude a pair of classes from a rule, e.g.:
*:not(.class1, class2) { display: none; }
However, it looks like the not() property doesn't support comma separated classes, as show in this fiddle.
HTML:
<div class='one'>
foo
</div>
<div class='two'>
foo
</div>
<div class='three'>
foo
</div>
<div class='four'>
foo
</div>
CSS:
div {
background-color: #CBA;
}
div:not(.one) {
background-color: #ABC;
}
div:not(.one, .three) {
color: #F00;
}
The first and second rules get applied, but the third doesn't.
I can't do *:not(.class1), *:not(.class2) because any element which has class2 will be selected by *:not(.class1) and vice versa.
I don't want to do
* { display: none;}
.class1, .class2 { display: inline; }
because not all .class1 and .class2 elements have the same original display property, and I want them to retain it.
How can I exclude multiple classes from a rule, either with the not() property or otherwise?
You can use:
div:not(.one):not(.three) {
color: #F00;
}
Fiddle
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}