My HTML code fragment:
<div class="random-xxx-class1 sdfgsdfg-class2">test</div>
CSS:
div[class$='ss2'] {
background-color: red
}
It works well, but for:
div[class$='ss1'] {
background-color: red
}
Didn't work.
How can I use CSS for end class which is not last class in DIV without adjusting order?
I'd go with something like
div[class$="ss1"], div[class*="ss1 "] {
That will handle any class attribute ending in ss1 (the final class in the list) or containing a class ending in ss1, potentially followed by other classes.
Related
Two elements have the same class name, in my case, "img"
Is it possible to style the elements differently that are children of two different classes, even if they have the same class name?
I want the img elements under class "slide-type-final" to be styled different to the img elements under "question-2"
.slide-type-final>img {
max-height: 40em;
}
.question2>img {
max-height: 40em;
display: inline-table;
}
img isn't a class name in this case, is it? Apart from the solution you already have in your question (?), ...:
1.) You can apply a second class to the parent(s), like <div class="slide-type-final up"><img scr="...">, whose img child you would address as slide-type-final.up>img { ... }
2.) You can apply different classes to the img tags, like <div class="slide-type-final"><img class="up" scr="...">, which you would address as slide-type-final>img.up { ... }
it would be helpful if you can provide html structure. and yes, css styles can be override based on parent element/class.
if styles in your code are not overriding, that means hierarchy is not correct.
'>' symbol means img tag (note not class as to catch img class you should have .img) should be direct child of element with class slide-type-final or class question2. if weight of classes are same, then whatever style come last will apply
You can use pseudo-classes like nth-child(2n)/first-child/first-of-type/last-child
Or :not(:last-child) etc.
In Chrome and Firefox, the following doesn't have the desired effect:
<style>
#hoverOnMe { background-color:orange; }
.open:hover { background-color:lightblue; }
</style>
<div id='hoverOnMe' class='open'>HELLO</div>
The :hover doesn't work. The background remains orange on hovering.
However, each of the other three possible combinations (listing by id twice, listing by class twice, and listing by class followed by id) works.
Of course my actual project is a little more complicated than this example; I'd like to add an "open" class to every hoverable element.
What's going on here? What's the simplest workaround?
I'd like to add an "open" class to every hoverable element.
Well if this is the case and you expect the same behaviour for all elements,
then you could just use !important:
.open:hover {
background-color:lightblue!important;
}
I have a button component in extjs.
For this component CSS has been set like class='one btn-exit-cls three four five x-menu-active' .
in that the class name btn-exit-cls is unique.
when this button is clicked a menu appears which adds the CSS class name x-menu-active to the class
I wanted to set rule for btn-exit-cls and x-menu-active combining both. So that I can apply menu active style for various buttons.
What I am expecting is
.btn-exit-cls .x-menu-active {
//some css
}
.btn-delete-cls .x-menu-active {
//some css
}
.btn-add-cls .x-menu-active {
//some css
}
I don't want to modify the existing CSS. I just want to override.
If you want to target elements that have both classes, you must write them without a space between them:
.btn-exit-cls.x-menu-active {
...
}
Otherwise, if you wirte it like this:
.btn-exit-cls .x-menu-active {
...
}
you are targeting elements with class x-menu-active that are descendants of elements with class btn-exit-cls
you just need to remove the spaces between classes, so it will be like this :
.btn-exit-cls.x-menu-active {
//some css
}
.btn-delete-cls.x-menu-active {
//some css
}
.btn-add-cls.x-menu-active {
//some css
}
So..
Your CSS code .btn-exit-cls .x-menu-active means :
Select all elements with the class name x-menu-active that are decedents of the element with a class name of btn-exit-cls. such as this code :
<div class="btn-exit-cls">
<div class="x-menu-active">
//some HTML
</div>
</div>
But the other code .btn-exit-cls.x-menu-active means :
Select the element which has a class name of btn-exit-cls and also a class name of x-menu-active. such as this code :
<div class="btn-exit-cls x-menu-active">
//some HTML
</div>
This small space between the two classes makes a huge difference in what it does
Hope this will help you ...
I have the following bit of Sass code :
.c-panel-menu-c {
&.grid_6 {
float: right;
}
}
i need to have float right applied to all grids that start with grid_ . The float should only be set when the grid class is applied to an element that also has c-panel-menu-c.
I wanted to use a wildcard selector like
div[class*='grid_'] {
float:right
}
But am not sure if it's possible the way i need it. Something like
.c-panel-menu-c {
&.div[class*='grid_'] {
vertical-align: top;
}
}
Which doesnt work.
Thank you for any tips/advice.
the problem is the tag name ... you can not concatenate a tag name, for example div, at the end of another selector, like you would with a class name. Let's look at your example:
.c-panel-menu-c {
&.grid_6 {
...
}
}
will return
.c-panel-menu-c.grid_6 { ... }
which is a valid selector. But attaching 'div' at the end (lets leave out the attribute selector part for now)
.c-panel-menu-c {
&div {
...
}
}
does not make sense (and it also isn't possible in Sass, hence you get an error) as the tag name should always be before the class or id selector. This does not change if we add an attribute selector statement, so that's why it does not work the way you tried &div[class*='grid_'].
What you can do, is add the attribute selector directly to the preceding class name, like so:
.c-panel-menu-c {
&[class*='grid_'] {
...
}
}
which would compile to:
.c-panel-menu-c[class=*'grid_'] { ... }
and select everything that has the class .c-panel-menu-c and a class containing with grid_.
I want to modify class of an element for specific parent. Here is what I have:
<form id="form2">
<div class="blueform">
<div class="formlegend">
...
</div>
</div>
</form>
I would like to override class formlegend only for form with id "form2". I have tried:
#form2.formlegend {
padding: 10px;
}
but it does not work. Is this even possible?
You are missing the "descendant combinator" (whitespace, usually just a single space character) between the 2 selectors:
#form2 .formlegend {
padding: 10px;
}
Without the descendant combinator, your selector will match an element with an ID of form2 and a class of formlegend. According to the markup in your question, you need it to match an element with the class formlegend that is a descendant of an element with an ID of form2.
You can try
#form2 .blueform .formlegend { }
if this does't work, you have to add additional element with unique ID ( ID always should be unique ). Two ID call override one ID call so it would look like
#override #form2 .formlegend { }
Yes, but make sure your override class is declared after your originale class in your CSS