How to Select Multiple Elements inside a div for CSS

Question

This may seem like a really simple question that can be answered by Google, but I have been struggling to figure this out for a while. Say you have an HTML code like this:

    <p> text 1 </p>
    <div class = "divone">
        <p> text 2 </p>
        <h1> text 3 </h1>
    </div>

and if I have CSS setup like this:

    .divone h1, p{
        color: yellow;
    }

It seems to change the p element outside of the div element. What can I do to select the elements inside a div so that it only changes the p inside the div "divone"?

none of the answers below say this but you can also use a universal selector to select all child elements of an element - `.divone * {}` or `.divone > * {}` if you only want direct children. Be careful if using it though as it can be an expensive selector ([although not too much in modern browsers](https://stackoverflow.com/questions/2951997/what-is-the-performance-impact-of-the-universal-selector)) - which is why I haven't put this as an answer. [More information about the universal selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) — Pete, Jul 02 '19 at 10:18
@Pete But it's not the same as `.divone h1, .divone p` and you will have lot's of issues with that. In my experience it's better not to use it. — Justinas, Jul 02 '19 at 19:48
@Justinas Can you expand on "lot's of issues" like what? I've never had a problem using it — Pete, Jul 03 '19 at 07:44
@Pete E.g. You have modal inside `.divone`, then you need to overwrite background color to be different, but it happens that `#container .divone` has higher priority than `.modal`, so you start to use `!important`... and so on... — Justinas, Jul 03 '19 at 07:49
@Justinas I've never needed to use `important` with a universal selector - that must be just you not understanding how to use css properly - it's all about specificity and would work in exactly the same way as divone p and divone h1. Any other issues? — Pete, Jul 03 '19 at 07:53

Justinas · Accepted Answer · 2019-07-02T09:01:19.967

6

, separates rules, so you must repeat .divone:

.divone h1,
.divone p {
    color: yellow;
}

You can use some CSS preprocessor like LESS or SASS to nest rules:

.divone {
    h1,
    p {
        color: yellow;
    }
}

but it will compile to same CSS rules.

Your current rule .divone h1, p says apply for h1 that is inside .divone or any p element on page

edited Jul 02 '19 at 09:01

answered Jul 02 '19 at 08:58

Justinas

41,402
5
66
96

Really? I swear that there was a more intuitive way to select multiple elements inside a div, huh. – Dragonsnap Jul 02 '19 at 08:59
1

@Dragonsnap With a CSS preprocessor like SASS/SCSS you can, but not with standard CSS – metaDesign Jul 02 '19 at 09:00
2

@Dragonsnap - we're getting close. Support for [`.divone :is(h1, p)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) is available behind an experimental flag or experimental vendor prefix or previous name [in most browsers](https://caniuse.com/#search=%3Amatches) – Alohci Jul 02 '19 at 11:09

score 1 · Answer 2 · edited Mar 21 '21 at 09:26

1

p element's parent is not specified, so you should do one of this things:

.divone h1
.divone p {
 color: yellow
 }

or you can use ">" symbol, which effects direct children of element

.divone > h1
.divone > p {
 color: yellow
 }

edited Mar 21 '21 at 09:26

Abhijithabhi

5
5

answered Jul 02 '19 at 09:24

Levan Tchumburidze

69
4

score 0 · Answer 3 · answered Jul 02 '19 at 08:59

0

.divone h1, .divone p{
     color: yellow;
}

answered Jul 02 '19 at 08:59

dev

152
1
10

Manoj Sharma · Answer 4 · 2019-07-03T05:02:45.637

-1

to select immediate children of a specified element. and avoid deeper nesting, use immediate selector ">"

.divone > h1, .divone > p {
    color: yellow;
}

otherwise for selecting all children of parent element use

.divone h1, .divone p {
     color: yellow;
}

edited Jul 03 '19 at 05:02

answered Jul 02 '19 at 09:02

Manoj Sharma

1,068
2
11
17

2

Please add a comment explaining how your code fixes the issue to improve this answer. – Eric Hauenstein Jul 02 '19 at 13:20
`.divone > h1` is not the same as `.divone h1`! – Justinas Jul 02 '19 at 19:49
@Justinas, here, Question explains the immediate children of a specified element (
), so used the .divone > h1 as immediate selector
– Manoj Sharma Jul 03 '19 at 04:58
@EricHauenstein I've added explanation in my answer – Manoj Sharma Jul 03 '19 at 05:03

How to Select Multiple Elements inside a div for CSS

4 Answers4