I've a quick :nth-child issue that I'm struggling to solve. I'm aiming to target every 3rd and 4th item in a grouping of 4 items that form a list.
For example:
<div class="normal">Item 1</div>
<div class="normal">Item 2</div>
<div class="different">Item 3</div>
<div class="different">Item 4</div>
<div class="normal">Item 5</div>
<div class="normal">Item 6</div>
<div class="different">Item 7</div>
<div class="different">Item 8</div>
In this example I'd like to target all instances of <div class="different"> - i've used a lot of nth-child generators to come up with an answer but nothing gets me to what I need.
Any help would be much appreciated!
Use div:nth-child(4n-1), div:nth-child(4n). The logic is simple — you want to select items in groups of four, so 4n would be the common denominator. Since you want to select the penultimate and the last items in the group, 4n-1 and 4n respectively would do the job.
As follow is a simple diagram illustrating my point:
#1
#2
#3 <- 4th item - 1
#4 <- 4th item
#5
#6
#7 <- 4th item -1
#8 <- 4th item
div:nth-child(4n-1), div:nth-child(4n) {
background-color: #eee;
}
<div class="normal">Item 1</div>
<div class="normal">Item 2</div>
<div class="different">Item 3</div>
<div class="different">Item 4</div>
<div class="normal">Item 5</div>
<div class="normal">Item 6</div>
<div class="different">Item 7</div>
<div class="different">Item 8</div>
Related
I have this code -
<div class="columns">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
</div>
I want to make like this with Bulma css -
https://codepen.io/hashem/pen/ausJL
If I resize ( mobile version ) , those columns break in to 2 columns , instead 4 .
This should solve your question:
<div class="columns is-mobile is-multiline">
<div class="column is-half-mobile">column 1</div>
<div class="column is-half-mobile">column 2</div>
<div class="column is-half-mobile">column 3</div>
<div class="column is-half-mobile">column 4</div>
</div>
If you want to fit in as many columns as possible and have them wrap when the screen size gets smaller use this:
<div class="columns is-mobile is-multiline">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
<div class="column">column 4</div>
<div class="column">column 5</div>
<div class="column">column 6</div>
<div class="column">column 7</div>
<div class="column">column 8</div>
<div class="column">column 9</div>
<div class="column">column 10</div>
</div>
Check these links for more information about what you're trying to do.
https://bulma.io/documentation/columns/responsiveness/
https://bulma.io/documentation/columns/options/
Is there possible to stack elements on each other (col-12) on small device, but use auto-layout for all bigger screens? An example mentioned below does not work. I do not know how many columns I will render (1-6) so cannot "calculate the class" in advance.
<div class="row">
<div class="col-12 col-md-auto">Column 1</div>
<div class="col-12 col-md-auto">Column 2</div>
<div class="col-12 col-md-auto">Column 3</div>
</div>
Just remove the auto
<div class="row">
<div class="col-12 col-md">Column 1</div>
<div class="col-12 col-md">Column 2</div>
<div class="col-12 col-md">Column 3</div>
</div>
How can I select one element after a specific element? In e.g.
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
How can I select the 4 div.inner after .header without selecting first three div.inner?
FYI, I am unable to modify any HTML, I am able to modify only CSS.
EDIT
I have not made the correct question. I just need all the .inner elements after .header skipping the first n ('n' might change in the future) elements.
EDIT
Goal is to style "Foo 7" to "Foo n", inclusive.
use the general sibling selector ~ as it will only match if the sibling comes afterwards.
.header ~ .inner { }
Okay, now that the question has been edited once more, again making my previous answer looking wrong, I change my answer once more to make it fit the question:
You can use several + selectors to "count up" to the first sibling that should be affected and then add a ~ selector after that to select all following siblings with the same class:
.header + .inner + .inner + .inner ~.inner {
color: red;
}
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
That's the best way to get what you're looking for
I hope I get it right
.header ~ .inner
demo Link
In this scenario is it possible to use CSS selector to only select item 4?
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
In this exact example, yes - though if you get much more complex it's going to get ugly and you'll probably need some (relatively simple) JavaScript.
In this example just use the Adjacent Sibling selector in combination with the :not() pseudo-class. This will target any class="a" that immediately follows a div that's not class="a".
div:not(.a) + .a {
color: red;
}
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
I created the following custom table:
http://jsfiddle.net/pg92nzh2/ (live example)
<div class="table-custom">
<div class="table-heading">
<div class="table-cell">title 1</div>
<div class="table-cell">title 2</div>
<div class="table-cell">title 3</div>
<div class="table-cell">title 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
</div>
Everything works great but I would like to be able to put a tag between rows (div, span or whatever) that won't affect the behavior of my table (the final goal is to use ng-repeat to this tag so I can have modular tables). Here is an example of what I would like to do: http://jsfiddle.net/gzdrz9mr/
I would like to put this tag preferably wherever I want without affecting anything...