This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
Hey is it posible to call a css class in an other css class.
e.g.
.test { font-family: verdana;}
.test2 { test ?}
I have a lot of keyframes. and i Need this in only one css class. is it possible?
I think you may want to look at how to nest CSS classes.
You can't do it in normal CSS buy you can by using Sass.
With Sass you can do this:
.test{
font-family: verdana;
.test2 {
/*CSS related only to .test2*/
}
}
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 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:
What does !important mean in CSS?
(5 answers)
Closed 6 years ago.
What does !important mean in VueJS?
I am new to vue.js and I am seeing this piece of code included after values in style sheets.
I can't find it in the docs.
!important is used in CSS to make sure that style overrides any competing styles.
lets say I have a button .btn and it was in a container called .btn-container
if I had css this css
.btn {
color: red !important;
}
.btn-container .btn {
color: blue;
}
the .btn color would still be red even though the nested rule is higher in specificity. Once you add the !important it overrides the specificity.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception
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:
Closed 11 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Can someone show me an example or correct syntax on how to apply pseudo style propeties directly to class or style property of anchor like this :
Link
Thanks.
Not sure I'm understanding your question, but if your CSS has something like:
a
{
font-family: sans-serif
}
a:visited
{
font-family: arial
}
Then you wouldn't need any class declarations in your markup for <a />.
Likewise, if you had classes like this:
.someClass
{
font-family: sans-serif
}
.anotherClass
{
font-family: arial
}
You would just do:
<a href='#' class='someClass anotherClass'>Link</a>