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
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.
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.
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 a css class that has a couple of children and I know that the child ellement that I want to target has an id that ends with 'inner-Ct. I don't want to assign it my unique id because it will be used in many places.
<div class="totalSummary">
<div>
<div id = "form-1406-innerCt"></div> //<---- this is the one I want to target
...
<div>
</div>
It's there a way to do this using css?
You could use the $ attribute selector to match the end of the ID like:
.totalSummary div[id$="innerCt"] {
background: red;
}
jsFiddle example
See: http://www.w3.org/TR/selectors/#selectors
[att$=val] Represents an element with the att attribute whose value
ends with the suffix "val". If "val" is the empty string then the
selector does not represent anything.
You can use something like:
.totalSummary div[id$="innerCT"] {
color: gold; /* The $ indicates a string that an attribute
value ends with, in this case "innerCt" */
}
Example: http://jsfiddle.net/xgRk7/
I'm looking at a css template that includes .myClass a.extra{...} and .myClass a.extra:hover{...} What does the "extra" mean?
extra is the name of a class.
Since you have:
.myClass a.extra{...}
that rule is applying to all the a elements with the extra class which are descendants of an element with the myClass class.
It's the class of the anchor. When the css says something like a.extra, it refers to an <a> element in html like this:
<a class="extra">Contents</a>
This is an example of a more general concept: x.y refers to any element <x class="y">.
In your example, a.extra indicates an anchor tag with a class name of 'extra'.
Extra link!
Chained selectors mean that both belong to the same element. So if I wanted to select a div with the id of "foo" and the class of "bar", I could define the rule in my CSS like so:
div#foo.bar {
/* disco */
}
Whereas using a space to separate (like in your example) would define a child attribute selector:
<style type="text/css">
.myClass a.extra {
/* disco */
}
</style>
<div class="myClass">
disco
</div>
Check out more attribute selectors here.
The a.extra means any anchor element with a class of "extra".
The entire line indicates:
Any anchor element with a class of "extra" that resides under any elements with a class of "myClass"