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.
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:
How can I apply CSS style changes just for one page?
(4 answers)
Page-specific css rules - where to put them?
(11 answers)
Closed 2 years ago.
I need to use the following styling for a specific page on my website:
*::-webkit-input-placeholder {
color: #909090 !important;
}
But I don't want it to be applied to the whole site, but only to a specific page.
How can I achieve that with only CSS. (I cannot use Sass on this site, only CSS)
The easiest way to achieve your goal is to add an id to the body tag of your specific page. It's also a good idea to at least add the vendor-prefix for firefox as well.
The * isn't needed for the css selector to work by the way.
#my-id ::-moz-placeholder, /* Firefox 19+ */
#my-id ::-webkit-input-placeholder /* Chrome/Opera/Safari */
{
background-color: red;
}
<body id="my-id">
<form>
<input type="email" placeholder="some#one.com">
</form>
</body
You can give the parent element of your html a class name
Example:
html page:
<div class="page"></div>
css:
.page {*your styles*}
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>
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:
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 */
}