Manipulate second div with class = row

Question

I have the following html code. Is it possible to manipulate the second row element and how?

<style>
.span11 row{}
</style>

<div class="span11">
    <div class="row"></div>
    <div class="row"></div>
</div>

It works!

.row:nth-child(2){background:#000;}

Answer 1

2种方法：

1. .row+.row{background:#000;}
2. .row:nth-child(2){background:#000;}

Answer 2

Yes.. Like this.

<style>
.span11 .row{
}

.span11 .row + .row {
}
</style>

Answer 3

You can use a CSS3 selector nth-child

Example:

.span11 row:nth-child(2)
{
background:#ff0000;
} 

More info at the W3 Schools website .

Keep in mind that this solution is future-proof, and will work smoothly in most modern browsers, but will perform poorly on outdated versions of some browsers like Internet Explorer 9 and older.

Answer 4

You could use

.row:nth-child(2) {

}

Answer 5

you can use nth-child(child number) the

.row:nth-child(the numbed child here) {

}

like in your case you are adjusting for second child so

  .row:nth-child(2) {
  // your styles here
  }

Fiddle Link Here

Answer 6

Try .span11 div:nth-of-type(3n+2) { border:1px solid red;}

http://jsfiddle.net/WV3w4/