Question

I have a doubt about this. Is it possible to apply styles to several classes which are between an interval of number? For instance, I have several divs with the class "content1", "content2", "content3", etc. In a normal case, perhaps you could do:

.content1, content2, content3{
  font-size: 1em;
}

Or:

div[class^="content"]{
  font-size: 1em;
}

But it is posibble to do something like this?

div.content:nth-child(1-6){
  font-size: 1em;
}

Answer 1

Indeed, it is.

Use nth-of-type

div[class^="content"]:nth-of-type(n+2):nth-of-type(-n+6){
   font-size: 1em;
}

Working JSFiddle

Answer 2

You might be interested looking at CSS preprocessors.

SCSS

@for $i from 1 through 6 {
  .content#{$i} { font-size: 1em; }
}

Live example here.

or LESS

Answer 3

You can do something like:

div[class^="content"]:nth-child(-n+4) {...} /* Which will target the first 4 elements

Which will result in:

<div class="content1">This item will be selected</div>
<div class="content2">This item will be selected</div>
<div class="content3">This item will be selected</div>
<div class="content4">This item will be selected</div>
<div class="content5">...</div>
<div class="content6">...</div>

Answer 4

No, you can't target an element based on a numerical index within it's class name.

There are ways in which you could go about it (see nth-child answers) however these would fail where N in contentN doesn't correspond to the element's actual index.

Easily the best solution would be to add the same class ('content' sounds fitting) to all your elements and select using that. That's what classes are there for.

Apply styles for several class which ends at a number

4 个答案: