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
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.
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>
Say I have a parent div with three child divs inside and I want to give each child a different background colour, can this be done with only one nth-child selector - my parent div has a class of "parent" and the three children have classes of "child1", "child2", "child3".
Thanks.
Yoy can't set 3 background-color in one selector (the 2 override by last defenition) as in image
I recommand you learn about selector in css:https://www.w3schools.com/cssref/css_selectors.asp
and more learn here(thanks to #Mosh Feu):https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
and: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
SO you have to do it as below:
.parent .child1{
background-color:red;
}
.parent .child2{
background-color:orange;
}
.parent .child3{
background-color:blue;
}
<div class="parent">
<div class="child1">one </div>
<div class="child2">tow </div>
<div class="child3">three </div>
</div>
You won't be able to do this with just one rule and just one selector.
In CSS, every rule applies a specific set of styles to all the elements that match its selector(s). This is a fundamental aspect of how CSS works. You can't have different declarations in a single rule apply selectively to specific elements — they will all just get overridden, leaving you with just one winning declaration that gets applied to all the elements that are matched. This is true even if you have multiple selectors in the same rule, and even if you use :nth-child() instead of class selectors.
For example,
.child1, .child2, .child3 {
background-color: red;
background-color: blue;
background-color: yellow;
}
is treated as
.child1, .child2, .child3 {
background-color: yellow;
}
which applies a yellow background to all three children, both despite and because of the fact that all three children are listed. The same holds true with .parent > :nth-child(1), .parent > :nth-child(2), .parent > :nth-child(3) as the selector.
Therefore, if you want to style three elements differently, you will need three rules, one for each element:
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
.child3 {
background-color: yellow;
}
Again, this is true regardless of what selector you use to actually reach each child element. The point is that each set of style declarations (property: value pairs) needs to appear in its own set of selector {} rules.
Why do you want to use nth selector if your child elements use different classes? Nth-selector should be used for elements that haven't got class selector or where the content is dynamic. In this particular case you don't need nth selector, just use
.parent .child1 {
background-color: #d3d3d3;
}
.parent .child2 {
background-color: #000;
}
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
This question already has answers here:
What is the specificity of the attribute selector?
(3 answers)
Closed 6 years ago.
If more than one CSS rule applies to an element and specifies the same property,
then CSS gives priority to the rule that has the more specific selector.
That means,
An ID selector is more specific than a class selector, which in turn is more
specific than a tag selector, as shown below,
#id1 {
color: blue;
}
.class1 {
color: red;
}
p {
color: green;
}
<p class="class1" id="id1">Sham</p>
the output is a paragraph text in blue color.
For the below code,
p[data-colour] {
color: yellow;
}
#id1 {
color: blue;
}
.class1 {
color: red;
}
p {
color: green;
}
<p class="class1" id="id1" data-colour>Sham</p>
With respect to attribute selectors, What does CSS rule specificity say?
It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
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