Suppose you have this HTML:
<div class='foo-element-1'></div>
<div class='foo-element-2'></div>
...
<div class='foo-element-500'></div>
CSS:
[class^='foo-'] { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Every .foo-element-### shares a common style in [class^='foo-']
Another way to write this might be:
HTML:
<div class='foo foo-element-1'></div>
<div class='foo foo-element-2'></div>
...
<div class='foo foo-element-500'></div>
CSS:
.foo { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Nothing else uses .foo. All .foo-element-### will have .foo attached to it in this option. Assume that browser compatibility is a non-factor and there are several hundred of these elements that all have a common style.
Is there a reason in terms of performance or semantics to use one style over the other?
Selection by classes is a good deal faster: http://jsperf.com/class-vs-data-attribute-selector-performance
Also, it just plain makes sense to have elements that share common style to share a common class. And if the elements style must deviate from the shared style, a second class on the element also just makes good sense.
Which means class selectors are both faster and more maintainable. There's not much downside here, other slightly more verbose markup. But assuming you are generating these items in a loop in some templating language, you would only need to write that extra class value once and the loop would duplicate it.
So yeah, use the class selector. It's pretty sweet.
Related
Can I do something like the following?
.class1{some stuff}
.class2{class1;some more stuff}
Update 1: There is a CSS3 spec for CSS level 3 nesting. It's currently a draft.
https://tabatkins.github.io/specs/css-nesting/
Update 2 (2019): We now have a CSSWG editors draft
https://drafts.csswg.org/css-nesting-1/
Update 3 (2022): We now have a W3C First Public Working Draft https://www.w3.org/TR/css-nesting-1/
If approved, the syntax would look like this:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
#nest & > .bar {
color: blue;
}
}
.foo {
color: red;
#nest .parent & {
color: blue;
}
}
Not possible with vanilla CSS. However you can use something like:
Sass
Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.
Or
Less
Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.
Example:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Not with pure CSS. The closest equivalent is this:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
Not directly. But you can use extensions such as LESS to help you achieve the same.
No.
You can use grouping selectors and/or multiple classes on a single element, or you can use a template language and process it with software to write your CSS.
See also my article on CSS inheritance.
I do not believe this is possible. You could add class1 to all elements which also have class2. If this is not practical to do manually, you could do it automatically with JavaScript (fairly easy to do with jQuery).
If you cannot wait until native CSS nesting goes official, you can use Container Queries to do it. As of now, it is supported (partially) by Chrome & Edge 105+, as well as Safari 16+.
It will looks like this:
.class1 {
container-type: inline-size;
container-name: my-container;
// other style rules
}
#container my-container (min-width: 0px) {
.class2 {
// some style rules
}
}
More details can be found at here.
Try this...
Give the element an ID, and also a class Name. Then you can nest the #IDName.className in your CSS.
Here's a better explanation
https://css-tricks.com/multiple-class-id-selectors/
How to make :hover work in less?
I need to change a button bg-color on hover and I wrote the following code:
.actions-toolbar {
.primary {
display: inline-block;
button{
text-transform: uppercase;
&:hover {
background-color: #df2423;
}
}
}
}
Unfortunately it doesn't work
Look at the resulting CSS and if that makes sense compared to your HTML structure.
Resulting CSS for your Hover-Style will look like this:
.actions-toolbar .primary button:hover { background-color: #df2423; }
One thing I always recommend when writing LESS or Sass or equivalent preprocessor languages: (very) careful with the nesting, it can cause irritiation and problems (very) often!
<div class="grandParent active"> /*active class added dynamically*/
<div class="parent1">
<div class="childOfParent1"> Some Text </div>
</div>
<div class="parent2">
<div class="childOfParent2"> Some Text </div>
</div>
</div>
Using Less how can i apply the child text color depending on grandParent class
.grandParent {
.parent1 {
.childOfParent1 {
color : red;
.grandParent:not(active) .parent1 .childOfParent1 {
color : green;
}
}
}
}
The above is possible using the below code but i do not want to repeat the code
.grandParent {
.parent1 {
.childOfParent1 {
color : red;
}
}
&:not(active) .parent1 .childOfParent1 {
color : green;
}
}
The most maintainable code would be something like this I guess:
.parent {
.child {
color: green;
.grandParent.active & {color: red}
}
}
Or less DRY (if you really want to get use of :not):
.parent {
.child {
.grandParent & {color: red}
.grandParent:not(.active) & {color: green}
}
}
See Changing selector order for more details on such & usage.
Following the comments below here's another variant:
.grandParent {
.parent {
.child {
color: green;
.active& {color: red}
}
}
}
[Well, slightly offtopic]
Though if really takes into getting it maintainable, there're a few remarks:
Avoid too specific selectors (so for this example I think either .grandParent or .parent are redundant actually).
Never nest for the sake of nesting. Sometimes nesting is good but sometimes it's extremely ugly (see this nice brief answer for just a few of many reasons for never doing it blindly).
DRY != maintainable. Often repeating one or two classes for "flat" styles are much better than writing a bloated and cluttered class hierarchy (Usually for such cases mixins and/or selector interpolation works better than plain nesting). E.g. instead of making it more easy modifiable (usually this is the only reason for being too heavy on DRY) think if you could write it the way you'll never want it to be modified at all.
I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.
Example
<div id="example" article class="example1 example2 example3">
Here's the div.
</div>
Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.
The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.
Thanks again!
What you're asking about is the order of precedence of applying CSS rules. Simplified:
It does not matter in which order you specify the classes on an element (class="foo bar baz").
It does matter in which order you write the CSS declarations in your CSS file.
foo { ... }
bar { ... }
baz { ... }
Later rules override earlier rules.
You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.
Example:
<div class="baz bar foo">
.foo {
color: blue;
border: 1px solid green;
}
.bar {
color: black;
border-color: orange;
}
.baz {
color: red;
margin: 10em;
}
Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:
color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz
(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)
I could do something like:
#id1 .class1, #id2 .class1{
color:#FFF;
}
But that seem's bulky, especially if I have a ton of ID's I want to share with 1 class.
I'd much rather do something like:
#id1, #id2 .class1{
color:#FFF;
}
Obviously this doesn't work, but you get my drift.
Thoughts?
EDIT:
Probably should have mentioned I am over-riding CSS framework before I got flamed. Think bootstrap or zurb foundation. That's why there is a need to do this instead of just using a class. I was just wondering if there was any other inheritance selectors I wasn't aware of in native CSS.
You can use a language like LESS which compiles to CSS. Just one of it's many features is that the following LESS:
#id1, #id2 {
.class1 {
color: #fff;
}
}
Compiles to:
#id1 .class1,
#id2 .class1 {
color: #fff;
}
That compilation can be done server-side (lessphp or less.js) or client-side (less.js) depending on your preference/needs.
What about this?
.class1
{
color:#FFF;
}
You're overthinking it. The point of classes is to cover multiple items. all you need to say is:
.class1{
color:#FFF;
}
this only won't work directly in 2 cases.
you have the class appearing elsewhere. Find (or create) a unique element surrounding your classes, such as
ul .class1{
color:#FFF;
}
you have the class showing up on other types of elements. In this case:
li.class1{
color:#FFF;
}
I suggest doing some reading about CSS specificity.
http://css-tricks.com/specifics-on-css-specificity/
First try writing a specific enough selector that will override the CSS framework.
This may involve doing something like
html body .class-i-want-to-override { /* ... */ }
It may require putting an !important on there, although that should be your last resort.
.my-class { color: pink !important; }
Finally I would suggest looking into a CSS preprocessor like SASS. This would allow you to write in a more efficient manner.
#special1,
#special2,
#special3 {
.override {
color: pink;
}
}
Which would get compiled to:
#special1 .override, #special2 .override, #special3 .override {
color: pink;
}
Why not just use a class?
Or apply, in the elements with these ID's, a common class? As a element can have a ID and classes at the same time..
In the code below is a basic example:
#commonClass .class1{
color:#FFF;
}