css selectors: difference between "body h1", "body .h1" and "body.h1"

Question

I am trying to understand to what elements this css rule would be applied:

body h1, body .h1 {
    font-family: 'Open Sans', sans-serif !important;
    color: inherit;
    text-rendering: optimizelegibility;
}

I understand body.h1 but not body h1 nor body .h1

insertusernamehere · Accepted Answer

body h1 will address all <h1>-elements inside the <body>-element:

<body>
    <h1>This one</h1>
    <div>
        <h1>And also this one</h1>
    </div>
</body>

body .h1 will select all elements inside the body that have the class h1:

<body>
    <h1 class="h1">This one</h1>
    <div class="h1">And also this one</div>
</body>

body.h1 finally will style the <body>-element itself, when having a class h1:

<body class="h1"></body>

tckmn · Answer

body.h1 will select the body element if it has a class of h1.
- (ex. <body class='h1'>this one</body>)
body h1 will select all h1 elements in the body.
- (ex. <body><h1>this one</h1></body>)
- this is redundant in well-formed HTML, it will basically do the same thing as h1, because the only place an h1 element can be (if your HTML is well-formed) is in the body)
body .h1 will select all the elements that have the h1 class in the body.
- (ex. <body><div class='h1'>this one</div></body>)

Therefore, body h1, body .h1 will select:

<body>
    <h1>this element</h1>
    <div class='h1'>and this one too</div>
</body>

Donate For Us