For example, there are total 12 elements.
I want to apply my style only on last n (1, 2, 3...) numbers of child of total 12 elements; how can I do this?
I think what you are looking for is the css pseudo-class :nth-last-child (see MDN)
Just use a negative n value and add the index from the end (represents number of elements)
.parentClass > * :nth-last-child ( -n + 3 ) {
/* CSS here for last 3 elements */
}
https://jsfiddle.net/evm0mg8j/
Related
I am using CSS Grid in my layout...
How do I set different column size on first row and full width on second row?
Is this possible?
Thank you so much!!!
This is not possible, the idea of css grid is to have a "grid", that is all the rows follow the same column configuration.
What you can do however is have an element span several column, and here you have several options:
This one stretches from the first column to the first from the end
div:nth-child(3) {
grid-column: 1 / -1;
}
This one spans 2 columns from the first one:
div:nth-child(3) {
grid-column: 1 / span 2;
}
This is a pretty specific issue and I wouldn't be surprised if it's impossible to solve. Let's say I have the following html, which I cannot change at all:
<box>
<tab class="A" id="A1">...</tab>
<tab class="A" id="A2">...</tab>
<tab class="A" id="A3">...</tab>
...
<tab class="B" id="B1">...</tab>
<tab class="B" id="B2">...</tab>
<tab class="B" id="B3">...</tab>
...
</box>
The amount of A and B tabs varies. Using only CSS, I would like to achieve the following behavior:
1: The tabs have to be arranged in rows, and wrap to the next row once they exceed the width of the box (which is only constrained by screen width). (This is the easy part. I already know how to do it with flex, but I'm not committed to one specific method.)
|A1 A2 A3 B1|
|B2 B3 |
2: But what I would like to see is for the B elements all wrap to the next line at once, as if they were one element. I also found a way to do this by inserting an invisible line break element with ::before and assigning it an "order" value that puts it between A3 and B1.
|A1 A2 A3 |
|B1 B2 B3 |
3: However, this means there are always a minimum of 2 lines, for each type of element. The behavior I'm trying to achieve is that if all elements do fit inside the width of the box, they should all remain on the same line, and only wrap in the manner described in 2 once the width is exceeded. Like this:
|A1 A2 B1 B2|
New tab is added:
|A1 A2 |
|B1 B2 B3 |
Without reformatting the HTML, implementing a few Javascript conditional if-statements might make it easier since you are still able to target the className directly.
If you are able to reformat the HTML in some way, it might be easier to control with creating 2 new HTML div elements in the box element (1 surrounding each different class type) in order to control easier with flex-box.
I found a solution. Assuming that the width of the box fits exactly 4 tabs (This should be mathematically generalizable to other cases of course. My actual case is much more complicated, with the box width fitting roughly 10 B-tabs, and B-tabs being 4 times as wide as A-tabs. I'm simplifying here for comprehensibility.):
The box is styled as a flex-box:
box {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
This inserts the line break with order value 1 (by default this is sorted after elements without the order property):
box::after {
display: flow-root list-item;
order: 1;
content: "";
flex-basis: -moz-available;
height: 0px;
}
This tells every B element immediately after an A element to be sorted after the line break iff A and B elements together exceed the line (this will require at minimum as many comma-separated selectors as the number of B-tabs that can be fit into the width of the box):
.A:nth-child(n+4) + .B:nth-last-of-type(n+1),
.A:nth-child(n+3) + .B:nth-last-of-type(n+2),
.A:nth-child(n+2) + .B:nth-last-of-type(n+3),
.A:nth-child(n+1) + .B:nth-last-of-type(n+4)
{ order: 2; }
This tells the subsequent elements to do the same:
.A:nth-child(n+4) + .B:nth-last-of-type(n+1) ~ *,
.A:nth-child(n+3) + .B:nth-last-of-type(n+2) ~ *,
.A:nth-child(n+2) + .B:nth-last-of-type(n+3) ~ *,
.A:nth-child(n+1) + .B:nth-last-of-type(n+4) ~ *
{ order: 2; }
Theoretically it should be possible to combine these two blocks via nesting:
.A:nth-child(n+4) + .B:nth-last-of-type(n+1),
.A:nth-child(n+3) + .B:nth-last-of-type(n+2),
.A:nth-child(n+2) + .B:nth-last-of-type(n+3),
.A:nth-child(n+1) + .B:nth-last-of-type(n+4)
{ order: 2;
~ * { order: 2; }
}
However, in my case that didn't work. I'm trying to style my browser UI, and apparently it doesn't accept nesting.
If anyone has a suggestion for how to further streamline this, it is more than welcome.
I have a list made of thousands of items.
In order to display them in a clean fashion, I need to apply a specific css rule to every third item of the list (3th li, 6th li, 9th li,....,3000th li..9999th li...).
Normally, I would use this:
li:nth-child(3),li:nth-child(6),...
but this would obviously be too tedious to write a css rule for each item (not to mention that the list may grow over time)
I also may use a class for every third item of the list but the list is reordered constantly according to a filter by a jQuery plugin (Quicksand), so the 6th li can asynchronously become the 4th one according to the user manipulation.
So, is there a way to use a css rule that would simply do something like this?:
li:nth-child(n*3)
Thank you.
You could use the :nth-child(an+b) pseudo class as li:nth-child(3n+3) in order to select every third list item (a parameter) starting from 3rd <li> element (b parameter).
In which:
n starts from 0
n = 0: (3 * 0 + 3) = 3 => 3rd element
n = 1: (3 * 1 + 3) = 6 => 6th element
n = 2: (3 * 2 + 3) = 9 => 9th element
...
li:nth-child(3n+3) {
background-color: gold;
}
Example Here. (Which is the same as li:nth-child(3n)).
From the MDN:
The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element.
It's worth noting that :nth-child pseudo-class is supported in IE9+.
I know you can select the last child with :last-child or a certain child with :nth-child (if you know their position/number).
What I need is to select the last 3 children without knowing how many child elements there could be.
I know there is something that's called :nth-last-child but I cant really understand how it is working.
For this:
<div id="something">
<a href="images/x.jpg" ><a/>
<a href="images/x.jpg" ><a/>
<!-- More elements here -->
<!-- ..... -->
<!-- I need to select these: -->
<a href="images/x.jpg" ><a/>
<a href="images/x.jpg" ><a/>
<a href="images/x.jpg" ><a/>
</div>
I need something like this:
#something a:last-child{
/* only now it selects the last <a> and the 2 <a>'s that come before*/
}
You can read more here about nth-last child, but this should basically do the trick of selecting the last 3 children with just CSS
#something a:nth-last-child(-n+3) {
/*declarations*/
}
fiddle demonstration from Fabrício Matté
This will only select those rows returning a positive number for out N expression (-n+3), and since we are using nth-last-child, it's counting from last to first,
so first rows from bottom gives,
f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom
everything else will return a negative number
This is possible with CSS3 selectors and formulas:
.something a:nth-last-child(-n+3) { ... }
You could also try using jQuery (example) or adding a specific class to the last three elements in your server-side code (it does not require JavaScript to be enabled in browsers and also works on older browsers that do not support CSS3).
The accepted answer has the correct formula, but the explanation is wrong.
So the correct CSS is (same as currently accepted answer):
#something a:nth-last-child(-n+3) {
/*declarations*/
}
But here is the correct explanation of the math:
f(n) = -n+3
f(0) = -0+3 = 3 <- 3rd row from the bottom
f(1) = -1+3 = 2 <- 2nd row from the bottom
f(2) = -2+3 = 1 <- 1st row from the bottom
f(3) = -3+3 = 0 <- nothing
f(3) = -4+3 = -1 <- nothing
etc...
For example, i have some <ul> element with <li> blocks floated left.
If i resize my that way, that to <li> elements got place by 3 in a row. Next, i resize window (by mouse for example) and my <ul> got new width with <li> elements placing by 4 in a row for now.
So, how to select last <li> in a every row of that stack of elements, that to set them some CSS rule (margin-right for example).
So i need to know, is there any CSS selector or way to select with behavior explained here:
http://jsfiddle.net/w7PDM/12/
you'll have to calculate the last one, and it's simple.
$('button').click(function(){
$('ul').css('width','200px');
$('.current-last-of-row').removeClass('current-last-of-row');
var itemsPerRow = Math.floor(parseInt($('ul').css('width')) / 40);
//$('li:nth-child(4n+4)').addClass('current-last-of-row');
for(var i=1; i < $('ul li').length; i++)
{
if( i % itemsPerRow == 0 )
{
$('li').eq(i-1).addClass('current-last-of-row');
}
}
$('h1').text('Now, every 4 element is a "last-of-a-row"');
});
check out the demo: http://jsfiddle.net/jun1st/hK9aZ/1/