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.
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 months ago.
I'm trying to add the same styling to multiple classes, including a nested SASS class like so
.class1,
.class2,
.class3,
.class4.class4child,
.class5 {
background: #FFF;
padding: 3.2rem;
border-radius: 0.8rem;
}
I'm hoping class4.class4child will inherit these properties, but this implementation doesn't seem to work. (class1,2,3,5 all work here)
edit: Not a duplicate of this question, as I was not aware of both syntax.
Replace
.class4.class4child,
which only applies to elements that have both classes, with
.class4 .class4child,
which applies to elements with class="class4child" which are descendants to an element with class="class4".
This question already has answers here:
Select elements by attribute in CSS
(6 answers)
Closed 1 year ago.
Here's the link to css code I am curious about : https://codepen.io/charlesxiao/pen/NWjgQQm.
Do you know what does the following css code means?
.awesome[data-sizing="intrinsic"] {
width: min-content;
}
What's this data-sizing attribute? I can't find it anywhere.
Thanks!
Much like how your selectors can target classes (.class) and ids (#id), your CSS can also target attributes, including data-*. It's common practice for javascript to target data-* attributes rather than going through the rigmarole of adding/removing classes. There's some particulars choosing between the two.
width: min-content; simply sets the element to the smallest possible size — the word "awesome" is the largest element and that's used as the width.
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.
This question already has answers here:
A CSS wildcard selector to match dynamic classnames?
(1 answer)
Is there a selector for 2 or more elements with the same attribute value?
(1 answer)
Closed 4 years ago.
I know this might sound crazy but for a small CSS experiment I ended up having to match a lot of selectors and I don't know how many there might be.
I made a codepen (based on an article from a list apart)
https://codepen.io/KADlancer/pen/gvEppr
Even though I can make SASS build all combinations I need, I don't want to end up having to include all combinations in my prod css file like this.
.state-1:checked ~ .panels .panel-1,
.state-2:checked ~ .panels .panel-2,
.state-3:checked ~ .panels .panel-3 {
display: block;
}
Thats ok for 3 - 10 maybe but after that... it gets insane. I'd love to build something like this.
.state-[magicIndex]:checked ~ .panels .panel-[magicIndex] {
display: block;
}
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