How to Add Different CSS Style to Every Nth Element, Depending on N Using Less

How to add different CSS style to every nth element, depending on n using LESS

Using less(but you have to set the num of elements):

.parent (@indexstart,@index) when (@indexstart < @index ){
  div:nth-child(@{indexstart}){
    padding-left: (@indexstart - 1) * 15px;
  }
  .parent (@indexstart + 1,@index);
}
.parent (1,4);

See example

Select every Nth element in CSS

As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero).

Here's how you would rewrite the above selector list:

div:nth-child(4n)

For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.

Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.

By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the n variable, it starts counting at 0. This is what each selector would match:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

As you can see, both selectors will match the same elements as above. In this case, there is no difference.

How can I get every second element if each is embedded in another one?

You can use the :nth-child property for this:

Example:

.question_container:nth-child(2n) .views{
    color: red;
}

:nth-child(2) would select only the second item, while :nth-child(2n) will select every second item.

CSS nth-child for greater than and less than

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on `:nth-child()`

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

Styling every 3rd item of a list using CSS?

Yes, you can use what's known as :nth-child selectors.

In this case you would use:

li:nth-child(3n) {
// Styling for every third element here.
}

:nth-child(3n):

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

:nth-child() is compatible in Chrome, Firefox, and IE9+.

For a work around to use :nth-child() amongst other pseudo-classes/attribute selectors in IE6 through to IE8, see this link.

How to use nth-child in CSS to select all elements after the 3rd one?

Yes you can do it using :nth-child(n+4)

In your case:

@media(max-width:768px) {
   .list li:nth-child(n+4) {
      display:none;
   }
}

You can see this fiddle : http://jsfiddle.net/wgLCH/2/

Apply CSS styles to an element depending on its child elements

As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.

It'd be wonderful if you could do something like div[div.a] or div:containing[div.a] as you said, but this isn't possible.

You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.

If you use jQuery, something along the lines of this would may work (untested but the theory is there):

$('div:has(div.a)').css('border', '1px solid red');

$('div:has(div.a)').addClass('redBorder');

combined with a CSS class:

.redBorder
{
    border: 1px solid red;
}

Here's the documentation for the jQuery "has" selector.

Style every third element?

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.}

Style CSS based on nth term count

In short, no.

CSS doesn't work like this, unfortunately. Despite what it looks like, n does not become a variable that you can use within that block of style. It's used to indicate that you are using the form (an + b) to specify a cycle size a and a starting counter b. For instance, a:nth-of-type(2n + 3) would select every other anchor element starting at the third.

To do something like what you are describing, you would need to use javascript or a CSS precompiler like LESS or SASS.

Bonus: In case you're curious, you could do something like this in jQuery to achieve what you are trying to do with pure CSS:

$('a').each( function( n, element ) {
    if ( n > 2 ) $(element).css('top',(n*950)+'px');
});

Or, if you want to use a preprocessor like SASS, (which would be preferrable to a JS solution for styling) you could do something like this:

$max: 100 // or whatever maximum number of elements you need to account for
@for $i from 3 to $max
  a:nth-of-type(#{$i})
    top: #{$i*950}px

Bonus 2: Here's a rather elegant pure JS solution from David Thomas in the comments:

Array.prototype.forEach.call(document.querySelectorAll('a'), function (aElem, index) {
    if (index > 2) {
        aElem.style.top = (index * 90) + 'px';
    }
});

http://jsfiddle.net/davidThomas/23nfskwb/ (note that while a smaller multiplier, 90, is used instead of 950, this is just a simple demo, using 950 would be perfectly acceptable)

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

How to Add Different CSS Style to Every Nth Element, Depending on N Using Less