In an attempt to avoid having to duplicate lots of CSS code for a bunch of different variants of CSS classes, I am attempting to cover it all in one statement. Let's say I have the following layout:
.body[class*="card--"] {
& .child[class*="card--"] {
/* apply some styles if they body have the SAME 'card--' class */
}
}
There are many variants of the "card--" class, such as "card--1" and so forth. I want to apply some styles to .child but only if they both have the same "card--" class.
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.
how do you apply a specific css to second-page
HTML
<div className = "section-header second-page">SOME MESSAGE</div>
Assuming the above:
CSS
.section-header {
background-color: black,
}
i want to apply a different background color specifically to second-page that does not modify section-header.
If you want the styling to apply to any element with .second-page class you should use:
.second-page {
backgound-color: red,
}
If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:
.section-header.second-page {
backgound-color: red,
}
When there's no space between two classes, it means it refers to an element with both classes.
For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp
Your HTML should be:
<div class="section-header second-page">SOME MESSAGE</div>
Your CSS could be:
.second-page {
background-color: black,
}
You can mix multiple classes within the HTML or target them separately.
If you need to validate your HTML code you can use this free service:
https://validator.w3.org/#validate_by_input
I have tried to combine to classes in CSS, but I end up failing. I used this code:
.container{
.ningbar
}
What I would like to do is combine the items in the ningbar layer with the items in the container layer. Thanks, Phineas.
This would do the job:
.container { /*container rules*/ }
.ningbar { /*ningbar rules*/ }
.container,.ningbar { /*shared rules*/ }
.container, .ningbar { }
Use the same rules for both.
why do you want to combine two classes ? I would make two seperate classes and use them in my controls as below
CSS:
.class1{
/* All styles for class1*/
}
.class2{
/* All styles for class2*/
}
HTML:
<div class="class1 class2"></div>
This way you can add both classes to your controls/DOM elements keeping them seperate in your CSS.
In order to use another styles' for another class, there is LESS, if I can say.
In a nutshell, LESS will help you to maintain more easily, and comprehensible your styles' files. You will be able to add variables, to avoid repetitions of same colors' codes, for instance.
You can view more detail on LESS's website : http://lesscss.org/
But, it's probably a complicated way, to simply add properties from another class.
For Combining two class you can us
.Class1 .Class2 {
//All style for combination of these two classes
}
I know CSS selector with the highest specificity takes precedence (i.e. .classname < #idname).
I also know that if things are the same specificity, then the last statement called takes precedence:
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
Does the ordering of HTML classes on a DOM element affect the statement priority?
I have to disagree slightly with Jon and Watson's answers, as...
Yes, it Can (depending on the statement)
Your question is:
Does the ordering of CSS classes on a DOM element affect the statement priority?
Which does depend on the statement in question.
HTML Ordering Does Not Typically Matter
The following are equivalent when it comes to a straight call to a class (i.e. .class1 or .class2) or to a combined call (i.e. .class1.class2 or .class2.class1):
<div class="class1 class2"></div>
<div class="class2 class1"></div>
Cases Where Statement Priority for above HTML Can be Affected Based on HTML Order
The main place where ordering in HTML matters is with the use of attribute selectors in your CSS.
Example 1 Fiddle using the following code seeking to match attribute value will NOT have any change in font color, and each div will have different properties because of the ordering of the classes:
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
Example 2 Fiddle using the following code seeking to match beginning of attribute value will NOT have any change in font color for the second div, and each div will have different properties because of the ordering of the classes:
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
Example 3 Fiddle using the following code seeking to match end of attribute value will NOT have any change in font color for the first div, and each div will have different properties because of the ordering of the classes:
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
A Clarifying Statement about "Priority"
To be clear, in the cases above, what is affected as far as "statement priority" is concerned is really a matter of whether the statement actually applies or not to the element. But since the application or not is in a sense, the basic priority, and since the above are cases where such application is actually based on the ordering of the classes on the HTML Dom element (rather than the presence or absence of the class), I thought it worth adding this as an answer.
Possible Valid Use of Class Ordering?
This is a thought occurring to me, based on BoltClock's comment. Consider just two classes being used to style elements based on whatever factors are deemed critical to different styling. These two classes theoretically can replace the use of eleven different individual classes using the combination of attribute selectors (actually, as will be noted later, the possibilities are almost limitless with but a single class, but I'll discuss that in a moment since this post is about ordering of multiple classes). For these two classes we can style elements differently as follows:
Assuming these HTML Combinations
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
CSS Possibilities
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
If I calculate right, 3 classes could give at least 40 combinations of selector options.
To clarify my note about "limitless" possibilities, given the right logic, a single class can potentially have imbedded in it code combinations that are looked for via the [attr*=value] syntax.
Is all this too complex to manage? Possibly. That may depend on the logic of exactly how it is implemented. The point I am trying to bring out is that it is possible with CSS3 to have ordering of classes be significant if one desired it and planned for it, and it might not be horribly wrong to be utilizing the power of CSS in that way.
No, it does not. The relevant part of the W3C standard makes no mention of the order of appearance for classes.
No, it does not, like you said, if two rules have the same specificity, the one that comes later in your CSS will be applied.
No. But if you want to make one of your declaration blocks to has more precedence (w/o many !importants) make its selector more specific.
For example, for a div:
div.classname1 { color: red; } /* classname1 color will be red (for `div`s) */
.classname1 { color: blue; }
What's missing or a little hard to find in other answers is this:
What matters is the order in which the browser reads/parses the class names
The class defined last will win
.a {
color: red;
}
.b {
color: blue;
}
<div class="a b">This text will be blue</div>
<div class="b a">This text will ALSO be blue</div>
Example comes from this source
May be affected by the order of your imports
Because if this you may need to pay attention to how you import CSS in your files.
For example in my JavaScript based project I have a component that I can pass extra classes to. In order for my own classes to overwrite styles of the classes of the component itself I need to first import the component I wish to style (which will import its own styles) and only then import my own styles:
//import the component first, which will import css
import {SomeComponent} from 'some-library/SomeComponent';
//And THEN our own styles
import './styles.css';
return <SomeComponent className={myClassName} />
Like this my buildprocess (Webpack) will put my own classes later in the CSS bundle than the components ones.
I need to do:
<p id="un_but" class="blue_but" class="radius_right">SignUp</p>
but this does not work.
Obviously I could just combine the class properties but I was wondering if there is another way perhaps
<p id="un_but" class="blue_but radius_right" >SignUp</p>
dom element(p) can have only ONE attribute(class), but with multiple values separated by space
One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>
This sets the following three classes on that paragraph tag:
pullquote
btmmargin
left
You would assign these as generic classes in your CSS:
.pullquote { ... }
.btmmargin { ... }
p.left { ... }
If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
You can use the important keyword to set precedence over different classes.
For example:
.pullquote { width :15 px !important }
.btmmargin { width:20px }
p.left { ... }
In the example above 20px width attribute will have more precedence.