This question already has an answer here:
Not getting correct output by :not() pseudo class
(1 answer)
Closed 2 years ago.
Haii
Looks like the css selector :not() doesn't work well with the * selector.
Any way around it?
Or am I doing something wrong?
*:not(.nope){
color: green;
}
<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>
I still get 'am' as green.
Thanks in advance!
The universal selector (*) is not the problem. It's the inheritance on the color property.
When you say...
*:note(.nope)
that's fine, but you're forgetting that * applies the color to the body and html elements, as well.
So .nope gets the green from its parent.
If you use a property that is not inherited (like border) you won't have this problem.
*:not(.nope){
border: 1px solid red;
}
* {
margin: 5px;
}
<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</div>
Notice how .nope doesn't get the border.
For the color to work as you want, be more specific.
div:not(.nope) {
color: green;
}
<div>hai</div>
<div>I</div>
<div class="nope">am</div>
<div>Jhon</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.
This question already has an answer here:
Why did browsers limit :visited selector?
(1 answer)
Closed 3 years ago.
I'm able to select child of a like so:
a > img {
/*change something*/
}
But I want first select a:visited, than its child. Something like:
a:visited > img {
/*change something*/
}
But the latter seems not working.
Example of HTML. Want change appearance of the image (adding border border: 2px solid; for example), if it is visited.
<!DOCTYPE html>
<body id="body-html">
<a href="https://stackoverflow.com/questions/56418220/css-selectors-avisited-childs?noredirect=1#comment99432271_56418220" class="test">
<img src="https://i.stack.imgur.com/nzzXb.png">
</a>
</body>
How can I achieve this?
Most CSS rules on :visited links have been blocked for security reasons.
However, you can still apply border-color to them.
The only gotcha here is that the border must be also applied on non-visited links, since you can only change the border-color.
a img {
border: 2px solid white;
}
a:visited img {
border-color: green;
}
fiddle
Though direct styling for :visited links is limited, there are lots of clever ways to extend your options for styling visited links. In 2015 there was a bumper crop of blog posts sharing new ideas for styling :visited links:
https://css-tricks.com/almanac/selectors/v/visited/
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.
This question already has answers here:
CSS text-decoration property cannot be overridden by child element [duplicate]
(2 answers)
Closed 9 years ago.
Apologies if this is a duplicate, but I'm enough of a CSS neophyte that I don't even know exactly what to search for.
I'm trying to modify text-decoration within a block by adding a span, and it's not working. How come? I can add a new text-decoration within the span, but I can't subtract the old one.
<h1 class="strikethrough">
stricken<span class="no-strikethrough"> no strike</span>
</h1>
http://jsfiddle.net/zV3ga/2/
Is there a way I can achieve my goal? I'd like to inherit all the properties of the h1 except the text-decoration, so I'd really prefer to have my "no strike" text inside that tag.
I have no idea why these people are saying it isn't possible. This is entirely possible via CSS.
http://jsfiddle.net/austinpray/y5bRS/
.strikethrough {
text-decoration: line-through;
color: blue;
}
.no-strikethrough {
display:inline-block;
text-decoration: none;
color: red;
}
.no-strikethrough:before {
content: '\00a0';
}
Strikethrough applies to the entire parent element. It's rendered the full width of the parent, no way to "turn off" for a child.
Any reason not to use HTML markup?
<h1>Partial <strike>stricken</strike></h1>
HTML5:
<h1>Partial <del>stricken</del></h1>
I think you are trying to keep the first part with a atrile and the second part without a strike.
So do this
<h1>
<span class="strikethrough">stricken</span> no strike
</h1>
And one more thing.
Using hyphens in the class name is fine and dandy if youre just in CSS but when you move to Javascript that will cause problems (as far as my knowlege goes). So practice that way
You can't do this in its current form, you are putting a strike on the H1 which is the parent of span, you can't have a child reverse it.
<h1 >
<span class="strikethrough">stricken</span><span class="no-strikethrough"> no strike</span>
</h1>
I do not know if it is useful for you but you may try striking span's inner.
<h1 class="no-strikethrough">
<span class="strikethrough">stricken</span> no strike
</h1>
Try it is the most optimized approach
<h1>stricken
<span class="test">no strike</span>
</h1>
.test {
text-decoration: line-through !important;
color: blue;
}
h1 {
text-decoration: none;
color: red;
}