CODEWITHSUNDEEP
htmlcsscss-selectors
mhartington
mhartington

Reputation: 7025

CSS select every other pair element

I have a simple unordered list.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Forth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ul>

I need to be abel to select every other element in pairs. So basically, I need the first + second, fifth + sixth, and so on as the pattern will repeat indefinitely.

I want to avoid using javascript as this will be an angular app, so I don't to do any DOM manipulation.

I've tried messing with nth-child() equations but can't figure out what equation will give me what I need. Any ideas? Any help is appreciated!

Upvotes: 0

Views: 4426

Answers (3)

anon
anon

Reputation:

Just an update: now it is possible to use keywords odd and even. Example: p:nth-child(even){...}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

you can select every fourth item minus 3 and 2 to include the first 2 one:

li:nth-child(4n-3),
li:nth-child(4n-2)

DEMO

Upvotes: 2

LarryG
LarryG

Reputation: 40

You could do something like this 

li:nth-child(4n+1), li:nth-child(4n+2) {
  color: blue;
}

example on codepen: http://codepen.io/erikL/pen/qyeKc/

Upvotes: 2

Related Questions