Style every third element?

问题:

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use even or odd with :nth-child but :nth-child(third) doesn't work neither does :nth-child(3)

Example:

<section>
  <div class="someclass"></div>             STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        DON'T STYLE
  <div id="someotherId"></div>              STYLE
  <div class="someclass"></div>             DON'T STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        STYLE
</section>

Is this possible with CSS - no javascript or jQuery?

回答1:

This is possible with pure CSS. No javascript needed.

Use the nth-child selector.¹

section > div:nth-child(3n+1) {
    background:red;
}

Where '1' is where the style starts, and 3 indicates that it should style every third element. It is explained much better here.

jsFiddle demo here.

---

¹_{Note - as other people have mentioned this is not fully supported by IE8 and down.}

回答2:

IE Support via Libraries

If it is IE support you are looking for, there is a wonderful library called Selectivzr that enables CSS3 selectors on IE versions 6-8.

Hack that doesn't help IE, but is done without use of :nth-child

Otherwise all I can offer is an ugly hack using the + adjacent sibling selector (Defined by CSS2 standards, but not available by default in IE8 or below)

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

JSFiddle

This pattern could be generated with most CSS Precompilers (ie SASS), but is limited by the amount of elements you wish to have.

Conclusion

If all you're looking for is IE support; then I strongly recommend using a library such as Selectivzr. This will spare you some IE6-8 headaches.

If I have any epiphanies in regards to a better solution, I'll post.

回答3:

section div:nth-child(3n+3) {  
    color: #ccc;
}

selected elements :

(3xn)+3 :
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

you can read it as follow :

(select all third element) starting at 3

here you have all what you need as DEMO

http://css-tricks.com/examples/nth-child-tester/

read more here http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

Select Only Odd or Even:

section div:nth-child(odd) {

}

section div:nth-child(even) {

    }

Select Only The First Five

div:nth-child(-n+5) {

}

回答4:

Pure CSS, No Javascript, with IE7/8 Support

Requires Change of HTML, or...

You must either explicitly set some class on the elements you want changed in your HTML, whether dynamically through server side script counting, or manually by hard coding.

Demo Fiddle

HTML

<section>
  <div class="someclass explicitClass"></div>
  <div id="someId"></div>
  <div class="someotherclass"></div>
  <div id="someotherId" class="explicitClass"></div>
  <div class="someclass"></div>
  <div id="someId"></div>
  <div class="someotherclass explicitClass"></div>   
</section>

CSS

.explicitClass {
    your-property-to-change: your-value-desired;
}

... Requires Extensive CSS Markup

Or you must generate CSS that is "counting" for you in a bulky way. As Indy noted in his answer (not sure why he stated adjacent sibling is "not available by default in IE8 or below," as that is incorrect), this could be handled through a CSS preprocessor, but even then, you really don't want to go this route unless you have a very limited number of elements, probably no more than what you posted for your example. If there were hundreds of elements, this is not practical. This solution requires no change in your HTML.

DEMO Fiddle

CSS

section div:first-child,
section div:first-child + div + div + div,
section div:first-child + div + div + div + div + div + div {
    your-property-to-change: your-value-desired;
}

Ultimately, I Agree with JoshC and Indy

I've offered the above answers just to show what you must do if you really want what you say you want. If it were me, unless it was absolutely vital to have these change of styles on every third element (so javascript turned off is fatal to the whole scheme; and even that could be worked around to restyle for non-javascript), I would use JoshC's answer as your CSS, and then use some form of javascript solution to make it backwards compatible (as Indy noted, or any other form of javascript solution).

回答5:

you can use

.my-class:nth-child(odd) {}

or

.my-class:nth-child(2n+1) {}

回答6:

section > div:nth-child(3n+1) {
    background:red;
}

This style is good for fixing your problem, but '>' this symbol, isn't supported for old browsers, for example: IE5, IE6, IE7 . . .

But I prefer this way, without '>' symbol

section div:nth-child(3n+1) {
    background:red;
}

回答7:

Possible solution is

section div:nth-child(3n+1) {  
    color: #ccc;
}

The above code styles every 3rd element starting from first element as requested.
Change the number after '+ sign' to set the starting element.
Change the number before n charecter to set the elements after to be styled

回答8:

With pure css this can be easily done. You can define CSS Selector and change the desired child property. For your case below is suitable.

section > div:nth-child(3n+1) {
    background: green;
}

How this work.

Pseudo-elements and pseudo-classes

Here above work like below

if n = 0 then 3*0 + 1 = 1
if n = 1 then 3*1 + 1 = 4
if n = 2 then 3*2 + 1 = 7
if n = 3 then 3*3 + 1 = 10
...........

If you want every 3rd element then your css looks like

section > div:nth-child(3n+3) {
    background: green;
}

Here above work like below

if n = 0 then 3*0 + 3 = 3
if n = 1 then 3*1 + 3 = 6
if n = 2 then 3*2 + 3 = 9
if n = 3 then 3*3 + 3 = 12
...........