If I wanted to select every 4th element starting at the 5th spot I would do:
.elem:nth-child(4n+5) {
//something
}
But how to do it for every odd element starting at the 5th spot? This syntax doesn't work:
.elem:nth-child(:oddn+5) {
//something
}
You could use .elem:nth-child(2n+5)
li:nth-child(2n+5) {
color: red
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
The 2n will select every other element and the +5 acts as the offset. So with n starting at zero, you get 5, 7, 9, 11, ...
You can use
:nth-child(odd) to select every odd element
:not(:nth-child(-n + 4)) to not select first 4 elements
div:not(:nth-child(-n + 4)):nth-child(odd) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Or if you want to start from 5th element you can change to this
div:not(:nth-child(-n + 5)):nth-child(even) {
background: red;
}
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Related
I have a two-column-list that looks like this
I need the list items of the second column to always align to the right border of the list but not text-align right, but like this:
so the item with the longest word is actually text-aligned to the right, but the other shorter items start right where the longest item starts. The list css up until now is
ul{
column-count:2;
}
If you're open to using two lists in a parent container you can utilize flexbox. margin-left: auto moves the element to end of container in this case. Be sure to specify the parent's width so it knows what to align to! See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div style="width:100%; display: flex; flex-direction: row">
<ul style="">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul style="margin-left: auto">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
It not usual to do so, but we are getting an unordered list from an external tool and have to deal with it. This is why I am asking here.
I need the ul to behave like an ol.
It's easy to say, list-style-type="decimal".
But I would need to have the START parameter as well.
If that is not possible to have in an easy way I would have to build something completly independant, aka
<li>
<span>1.</span>
<p>Text</p>
</li>
I would really like to avoid that, so my question is:
Is it possible to use an ul as an ol including the start value?
<ul start="17">
You can use CSS Counters and define a starting point in the counter-reset` CSS.
ul.my-list {
list-style: none;
counter-reset: item 17;
/* number should always be 1 LESS than your required starting number */
}
.my-list li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<ul class="my-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
It should be easy to handle for a user on the other side of the desk. He should have a tool where he defines e.g. <list start="17"> That's it. He should not handle with css or whatever.
That being the case, this Q&A may offer a solution..the user merely has to apply a style="--start-xx"; inline style and CSS Custom properties can handle the rest.
ul.my-list {
list-style: none;
counter-reset: item calc(var(--start) - 1)
}
.my-list li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<ul class="my-list" style="--start:21">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul class="my-list" style="--start:10">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
I need to apply style only to the elements that has the class "red". How do I avoid applying the class to all children town the stream?
.red {
color: red
}
<ul>
<li>item</li>
<li class="red">item
<ul>
<li>item</li>
<li class="red">item</li>
<li>item</li>
</ul>
</li>
</ul>
Apply CSS to all immediate children of .red using > *. Reset color to initial to ignore any previous styling (from the element's parents).
.red {
color: red
}
.red > * {
color: initial;
}
<ul>
<li>item</li>
<li class="red">item
<ul>
<li>item</li>
<li class="red">item</li>
<li>item</li>
</ul>
</li>
</ul>
If you have control of your HTML, consider inserting an element containing only the text you want styled. For example:
<ul>
<li>item</li>
<li><em class="red">item</em>
<ul>
<li>item</li>
<li><em class="red">item</em></li>
<li>item</li>
</ul>
</li>
</ul>
In your original document, the nested ul is part of the li with a class of red. This means that the red styling will take effect as well. This may allow for less complex CSS and greater semantics in the HTML document.
Is it possible to continue the numbering in separate ul / ol blocks with css?
1 2 3 4 5 6 ....
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
Maybe you could use this property?
https://css-tricks.com/almanac/properties/c/counter-increment/
Something like this, you could modify it onto the ordered list only, use counter-increment.
More info of the usage here:
https://developer.mozilla.org/en/docs/Web/CSS/counter-increment
Use this:
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
// use start number you want as below
<ol start="50">
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Is it possible to display only decimal numbers and not the whole numbers at the top level of an ordered list outline? For example:
<ol>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</li>
<li>Item</li>
<li>Item</li>
CSS
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section,".") " ";
}
That would display a list like:
Item
1.1 Item
1.2 Item
1.3 Item
What I would like to achieve is:
Item
1.1 Item
1.2 Item
1.3 Item
Here is a fiddle I've been trying things out with:
http://jsfiddle.net/Py7k8/
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: "";
}
li ol li:before {
content: counters(section,".") " ";
}
DEMO