Creating CSS Rules Using Class Prefixes

Question

Twitter Bootstrap's different column selectors have different CSS properties. Col-md-1 has a smaller width than col-md-2. However, they all have some properties in common.

How can one rule be created that applies to multiple classes who all share the same prefix?

I imagine something like this:

.col*{
margin:0,2%;
}
.col-md-1{
width:4.3333333333%;
}
.col-md-2{
width:6.33333333%;
}

In the example above, both of .col-md-1 and .col-md-2 would have a margin of 0,2%. What is the correct way (if any) of doing this?

web-tiki · Accepted Answer · 2014-12-07T19:09:36.697

4

You can use :

[class^=col] {margin:0.2%;}

div {
  height: 50px;
  margin: 10px;
}
[class^=col] {
  background: red;
}

<div class="col-md-1"></div>
<div></div>
<div class="col-md-2"></div>

This ^= means "begins with". You could also use the [class*=col] or [class*=md] for more info, see the specs on substring matching attribute selectors.

(Note that you should be using a dot instead of a comma or a white space in the margin value declaration)

edited Dec 07 '14 at 19:09

answered Dec 07 '14 at 18:22

web-tiki

99,765
32
217
249

My margin values are separated by a comma intentionally. 0 top and bottom, 2% left and right. Thank you for your answer though, especially the link to specs. For that i'll choose your answer as the solution over Michal's. (also for the snippet) – Patrick Motard Dec 07 '14 at 18:39
3

@PatrickMotard then you should be using a blank space between the margin values, `margin:0,2%;` is invalid CSS – web-tiki Dec 07 '14 at 18:42
2

Just for your reference @PatrickMotard if you open up the unminified CSS for Bootstrap you'll see that they use [class*=col] see line 2312, https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css get really intimate with the source CSS, LESS, or SASS so that you can do things quickly. – Christina Dec 07 '14 at 18:43
@web-tiki, Thank you for catching that! You're right! – Patrick Motard Dec 07 '14 at 18:44
@Christina, when you are over riding a specific rule in Bootstrap, do you create a new css file and use the same exact selector for your over ride rule? Does loading your own script after bootstrap allow the over ride? – Patrick Motard Dec 07 '14 at 18:47
2

@PatrickMotard you use the same specificity or greater in another css file after the framework's css file. You could just stick it at the end of the Bootstrap css but upgrading is annoying then. – Christina Dec 07 '14 at 18:50
@Christina, good food for thought. I've been avoiding bootstrap because it has so much going that I'm not aware exists, but i'm going to start digging through its source for answers to questions I may have later as you suggest. Thanks! – Patrick Motard Dec 07 '14 at 18:53
@PatrickMotard If you start using LESS or SASS or even the customizer on the GetBootstrap.com sitey you can pick and choose. For example, most brochure sites really need just forms, grid, and a few other things, not the entire library. When using a preprocessor you can import what you need and comment out what you don't need and in LESS when you comment, it doesn't output. LESS is really great, I prefer it since I'm not as technical as others. I'm an artist. – Christina Dec 07 '14 at 18:55

score 2 · Answer 2 · answered Dec 07 '14 at 18:32

2

You can either use a ^= operator (starts with), or a |= operator (is on a dash-separated list):

[class^=col] {
    /* this will work just for prefixes */
}

[class|=col] {
    /* this will work for any dash-separated segment... */
}

[class|=md] {
    /* ...such as "md" in your case */
}

A word of warning, though - these aren't the best selectors in terms of performance. Try not to use them extensively.

answered Dec 07 '14 at 18:32

Michał Dudak

4,923
2
21
28

Interesting point about performance. If performance takes a hit for this approach, what do you think Twitters solution is then? – Patrick Motard Dec 07 '14 at 18:41
1

I wouldn't worry too much about performance issues using this CSS selector except if you are selecting a very big amount of elements. – web-tiki Dec 07 '14 at 18:47
2

It's fine: Read up further down the page. http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Christina Dec 07 '14 at 18:53

Creating CSS Rules Using Class Prefixes

2 Answers2