I have an unordered list with several list points in an HTML.
In my CSS, I want to target the 5th and 7th list points. So I go
.my-list li:nth-child(5, 7){
background:yellow;
}
Nothing. It only works with a single number. So I assume I cannot separate them with a comma. What character/symbol should I separate them with? Is this even possible? Alternative solution? I doubt that I need to rewrite a target for every single nth element in my list... We're nearly in 2022. Just my reasoning.
Given your specific example, it’s somewhat easier to select the 5th and 7the elements than “[rewriting the] the [selector] for every single nth element,” using :is():
.my-list li:is(:nth-child(5),:nth-child(7)) {
background:yellow;
}
But it remains a somewhat verbose alternative, in contrast to the approach you desire, which is, as yet, not possible.
If JavaScript was an option, then a simple utility function could retrieve the desired elements, but not in CSS alone as yet.
There is no symbol for that. You can separate them like this:
.my-list li:nth-child(5),
.my-list li:nth-child(7) {
background: yellow;
}
If you use css-preprocessors you can write it a little bit cleaner, especially if you'll give class for list item:
.item {
&:nth-child(5),
&:nth-child(7) {
background-color: #fff;
}
}
Related
I see that multiple attribute selectors are "and-ed" together for example:
/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
color: green;
}
I there a way to express that I want to match all <a>s that have href containing one a, b or c?
Yes, you can target elements with one attribute value OR another in CSS.
Geat's selector list approach with commas , is the most straightforward, and also the most browser compatible:
a[href^="https"][href$=".org"][href*="a"],
a[href^="https"][href$=".org"][href*="b"],
a[href^="https"][href$=".org"][href*="c"] {
color: green;
}
https://a.org
https://b.org
https://c.org
https://d.org
http://a.org
I agree though that this can become cumbersome. Luckily we can use the modern CSS :is() pseudo class to shorten this selector:
a[href^="https"][href$=".org"]:is([href*="a"], [href*="b"], [href*="c"]) {
color: green;
}
https://a.org
https://b.org
https://c.org
https://d.org
http://a.org
This also has the benefit of making the selector list forgiving, where if one selector within :is() is invalid, the others will still work - a regular selector list in CSS is actually unforgiving and will break the entire list if one selector breaks!
Also note that both examples above will match A, B, C if they are contained within the protocol, path (any part of the URL) i.e.
a[href^="https"][href$=".org"]:is([href*="org"], [href*="http"], [href*="h"]) {
color: green;
}
https://org.org
https://s.org
https://x.org
https://y.org
http://website.org
Unfortunately, the substring syntax for attribute selectors in CSS does not currently feature a way to match A OR B in an elegant way like I've illustrated below which I'm sure is what you were hoping for:
a[href^="https"][href$=".org"][href*="a"|"b"|"c"]
I'm new in CSS and I have a question about blocks (actually I don't know how do we name the 'blocks' like #my-id{color: yellow} so if you can also answer that it would be great)
So, I wanted to know if it was possible to specifie how will type of a class comport, it would look like this:
.my-class{
h1{
color: yellow;
}
p{
color: blue;
}
}
I hope you understood what I want to explain, so please answer my two questions!!!
Technically, yes, but not when both blocks are rule sets. (e.g. you can put a rule set inside a media query).
Some other languages, such as SCSS, which can be transpiled to CSS, allow you to do that, but in CSS it is just invalid.
For the purpose of this demo, I'll use a StackOverflow element for credibility.
If you sign out of SO, you can see a large call to action box at the top of the page. Even easier, just go to their new Portuguese version here - https://pt.stackoverflow.com/
Once you see the call to action box (captured below) go ahead and inspect it with developer tools.
On the div with the ID of hero-content, you will notice a style that I have pasted below:
#herobox #hero-content {
background: #fff7d8;
border: none;
}
I have done some research and as we all know, div ID's should be unique to the page. Although, if they are unique, why would a selector need to state an ID within an ID?
There are a couple of reasons.
Stylesheets can be reused between HTML documents. You may wish to distinguish between #hero-content that is a descendant of #herobox one page and of #somethingelse on another page.
The more likely one in this case is specificity. Assuming, for example, that #hero-content is a <div>, a general rule to set the styling of #herobox div would be more specific that #herobox #hero-content. Adding an extra id selector would increase the specificity.
It might be simply to increase the specificity of that selector.
For example, the author may have wanted to override...
#hero-content { border: 2px solid #333; }
It could also be a side effect of a tool like LESS, where the author may have originally written...
#herobox {
// Lots of other CSS.
#hero-content {
// ...
}
// Lots of other CSS.
}
I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.
Is there any way to specify a color and quickly reference it within other elements further down the page? For example:
.red_color {
color: #FF0000;
}
Now, further down the page we have other elements:
div.example {
padding: 10px;
color: [REFERENCE ABOVE]
}
This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.
I know it is possible if I list all the elements in one place, like:
div.example, div.other_example, p {
color: #FF0000;
}
But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.
Any other ways of doing this?
Thanks.
Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.
With this HTML code.
<div class="noote">
<p class="first admonition-title">Noote</p>
<p class="last">Let's noote.</p>
</div>
How can I set the color of Noote to be red with css?
I mean, how can I set something for (div class="noote") and (p class="first") under it with css?
Try this:
/*this will apply for the element with class first
inside the element with class noot */
.noote .first{
color:red;
}
/* If you wanted to apply a rule for both individually
you can do: */
.noote, .first{
border:1px solid red;
}
div.note{
...
}
Refers to the div element that has the class note.
p.first{
...
}
Refers to the p element that has the class first.
div.note p.first{
...
}
Refers to the p element inside note that has the class first.
In addition, if you want to set an element child without setting a class to it,
div.note p:first-child{
/* it refers to the first p that contains noote */
}
#amosrivera's got it.
It's worth nooting that descendant selectors require more CPU. I always use more specific rules where possible. So instead of
.noote .first{
backgorund:red;
}
You could say
.noote > .first{
backgorund:red;
}
A nominal difference in most cases, but still a good habit.
Really?
Descendant selectors are
inefficient... The less specific the
key, the greater the number of nodes
that need to be evaluated.
— Google "Let's make the web
faster" docs
And
Descendent selectors are a major slow
down to the Safari browser
— John Sykes, May 2008
Some performance tests show little impact, and most writers agree that it only makes a difference on very large documents.
But mainly, I'm just going with my programmer instinct — say what you mean, and no more.