This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 2 years ago.
A JS library I am using is creating a new class every time I switch the page.
Something like:
.marquee0
.marquee1
.marquee2
.marquee3
.marquee4
.marquee5
.marquee6
...
Is there a way I can minify this in my css for an infinite amount of numbers?
At the moment I use this:
.marquee0, .marquee1, .marquee2, .marquee3, .marquee4, .marquee5, .marquee6 {
}
Thank you in advance!!
Yes there is a way! The CSS contains selector
div[class*="marquee"] {
background: #ffff00;
}
will give all those a background color.
Related
This question already has answers here:
CSS "and" and "or"
(9 answers)
Closed 4 years ago.
I'm not 100% sure if I'm saying this right, but basically, right now I am using a global CSS sheet, and in Drupal it generates a CSS sheet for each of my sub-sites based off of this one.
So we use [class*=""] to determine which subsite needs which code from this one CSS document.
If I have multiple subsites, that use one chunk of code is there a way to place an or statement?
For example...
[class*="site-1"] || [class*="site-2"] {
.class {
my css stuff
}}
Not sure if the above works or not.
[class*="site-3"] {
.class2 {
more css stuff
}
}
This will work on any element that has one of the classes:
.site1, .site2 {
...
}
So you can use it for style that is shared between the sites.
This question already has answers here:
Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type
(2 answers)
Closed 6 years ago.
How can I sum these css selectors together?
td:nth-child(1), td:nth-child(4), td:nth-child(5) {
font-size: 25px;
}
I thought of something like
td:nth-child(1,4,5) {
font-size: 25px;
}
but this doesnt work. Is there a way to condense this?
If you can't use a an+b formula to target them (which is the case in your particular example), then the code you wrote is the shortest version.
If you wish to simplify the CSS code, you could switch to classes... that however will make your HTML less clean.
This question already has answers here:
Can I programmatically determine a property value for a series of CSS classes?
(2 answers)
Closed 7 years ago.
I have many lines of CSS that essentially do the same thing over and over based on the class name:
.m45 {
height: 90px;
}
.m50 {
height: 100px;
}
.m55 {
height: 110px;
}
.m60 {
...
Is there any way to automate this so that a class that matches m followed by any number n gets the style height: calc(2px * n)?
No, CSS can't automate increases like this; it doesn't have support for functions like that. You can, however, use a CSS pre-processor like Sass to write shorter code that can handle things like a #for loop. Sass compiles into longer, normal CSS.
This question already has answers here:
Append the parent selector to the end with Sass
(1 answer)
Using SASS & reference for OOCSS
(1 answer)
Closed 8 years ago.
I have a class named button_class. Now a button or an input tag could have this class. Now using sass, I need to add something to the css if the tag name is input. Like this:
.button_class {
display: inline-block;
/* something like this */
& input {
padding: 2px;
}
}
As you guessed, I don't know how to do that.
SASS syntax doesn't permit this yet. :(
&input gives
"input" may only be used at the beginning of a compound selector
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Change only one of multiple backgrounds on hover
If you had a CSS declaration like this:
.selector {
background: url(image.png), url(image2.png);
}
and on :hover you wanted to change just the first layer, e.g.
.selector:hover {
background: url(image3.png), url(image2.png);
}
Is there a way to update the image to image3.png without having to redeclare the rest of the stack?
Unfortunately, no, there isn't any way to do that.