CODEWITHSUNDEEP
twitter-bootstrapcssclasstwitter-bootstrap-3
davidguerreromejias
davidguerreromejias

Reputation: 41

how can i concatenate multiple classes with css?

I have these bootstrap classes and I want concatenate each one with li, are there a best option than add li before each class? I mean, a way to group all bootstrap classes and concatenate with li.

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12

In my case I want only these four: li .col-xs-4 li .col-sm-4 li .col-md-4 li .col-lg-4 but i prefer to do generally.

Upvotes: 2

Views: 1168

Answers (2)

gabi493
gabi493

Reputation: 146

I think you're looking for something like this. 

li[class*='col-'], li[class^='col-'] {
  ...
}

Remember not to include the space between li and [class*='col-']. The combination of the two selectors above is done in order to prevent for classes like foo-col-1 to be selected.

Upvotes: 2

Razvan B.
Razvan B.

Reputation: 6771

You would have to use the CSS Selector:

'begins with..'

li[class^="col-"] { }

which would work on something like this:

<li class="col-md-4"></li>  
<!-- only if the very first string in your class matches "col-" -->
<!-- so, class=" test something-else" won't work

or

'contains..'

li[class*="col-"] { }

which would work on

<li class="col-md-4 col-sm-4 col-xs-4"></li> 
<!-- "col-" can be anywhere and as many times as needed -->

Upvotes: 2

Related Questions