Join more than one class including paragraph selector

Question

I want to use this:

 .box-03c1 p {line-height: 12.5px;padding: 15px 12px}
 .box-03c2 p {line-height: 12.5px;padding: 15px 12px} 
 .box-03c3 p {line-height: 12.5px;padding: 15px 12px}
 .box-03c4 p {line-height: 12.5px;padding: 15px 12px}

But I know there's some way to shorten it...

As you can see the parameters are repetitive.

Any clue?

I will really appreciate.

Thanks!

Gust van de Wal · Answer 1 · 2015-10-14T22:00:32.933

2

[class^="box-"] p{
    line-height: 12.5px;
    padding: 15px 12px;
}

This piece of code will apply the attributes to every p inside an element with a class that starts with 'box-'. It's a very efficient way to select elements introduced in CSS3

edited Oct 14 '15 at 22:00

answered Oct 14 '15 at 21:54

Gust van de Wal

5,211
1
24
48

Depending on use-case, I like this equally well as my proposed solution. – Todd Oct 14 '15 at 22:14
The methods are identical, so that seems to a logical solution to me – Gust van de Wal Oct 14 '15 at 22:44
I like this one, more complex but cleaner. Thanks! – Gill Soriano Oct 15 '15 at 14:28

Todd · Answer 2 · 2015-10-14T22:23:15.047

1

You can use the attribute type selectors to achieve this:

//never used this, but seems to be a great use-case
[class|=box] p {
  line-height: 12.5px;
  padding: 15px 12px;
}

Note that this will select divs with a class of box, as well, and not just box-*.

edited Oct 14 '15 at 22:23

answered Oct 14 '15 at 21:59

Todd

5,314
3
28
45

2

Interesting, i did not know this one. On the whole though i think I prefer the "starts with" up-caret selector. – Paulie_D Oct 14 '15 at 22:05
"If the equal sign is preceded by a pipe (|) then the selector will match elements whose attribute values form a hyphenated list of words in which the specified value is present. This operator is primarily intended for the lang attribute." SEE - http://courses.wccnet.edu/~jeggertsen/howtos/css/attribute_selector.html – Paulie_D Oct 14 '15 at 22:06
Right tool for the job scenario, @Paulie_D, agreed, but if you consider most use cases, this is a good solution more often than I'd've thought. Specifically, it beats having to add/select classes of `box` and `box-asdf`. if classes named carefully/semantically, a box is a box, and this should work fine. – Todd Oct 14 '15 at 22:11

score -1 · Accepted Answer · edited Oct 15 '15 at 05:50

-1

You can group all the selectors together like this:

.box-03c1 p,
.box-03c2 p,
.box-03c3 p,
.box-03c4 p {
    line-height: 12.5px;padding: 15px 12px
}

edited Oct 15 '15 at 05:50

Drenmi

8,492
4
42
51

answered Oct 14 '15 at 21:53

Dryden Long

10,072
2
35
47

This is really helpful, thanks a lot! I knew it was a solution like this. – Gill Soriano Oct 15 '15 at 14:27

Join more than one class including paragraph selector

3 Answers3