Can you group CSS rules together if they're similar?


#1

This is more of a theoretical question, but it seems like there's a lot of repetition, and I was wondering if you can group things together if they have the same properties. Like for the .jumbotron section. Instead of writing:
.jumbotron h1 {
color: #fff;
font-size: 20px;
}
.jumbotron p {
color: #fff;
font-size: 20px;
}
You could put them both under the .jumbotron heading. I'm not sure what that would look like, but my guess is something like this:
.jumbotron h1, p {
color: #fff;
font-size: 20px;
}


#2

Yes, you're right, if selectors contain the same properties and values you can group them together, like that:

.jumbotron h1, .jumbotron p {
   color: #fff;
   font-size: 20px;
}

you should select elements properly by that I mean, this: .jumbotron h1, p and .jumbotron h1, .jumbotron p are different. .jumbotron h1 selects all h1 elements inside all elements that have a class "jumbotron" and p selector selects all paragraphs, but as I understand it correctly you only want to target p elements that are inside elements that have class "jumbotron" so that's why you should write .jumbotron p and not just p.

This article can help you understand it better: http://www.ironspider.ca/adv/basic_css/combine_selectors.htm