CSS subchild selector

HTML & CSS
1

Both of the following codes seem to work properly to style the span element:

<style>
    div p span {
        font: 18px arial;
        color: red;
    }
</style>
<div>
    <p>
        <span>
Hello, world!
</span>
    </p>
</div>

<style>
    div span {
        font: 18px arial;
        color: red;
    }
</style>
<div>
    <p>
        <span>
Hello, world!
</span>
    </p>
</div>

But I’m not sure if the second one is the right coding and if there’s a difference between them, for example regarding browser support.

2

No, they are both fine. One is just a little more specific than the other. The first will only select spans that are inside a <p> within a <div>, which the second will select spans as long as they are in a <div>. It all depends on context which you use. Sometimes you can’t get away with being too general, as in the second example. Often there will be other spans that you don’t want to apply those styles to. In the real world, you’ll often need to target a specific part of the page with a class or ID so that one rule doesn’t affect all of the spans on your page.

3

Here’s an example showing exactly what Ralph just said :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
You are familiar with the cascade effect... the latest style overrides previous styles.
Now we examine the effect of specificity.  The "heavier" style overrides the "weaker", less specific style.
-->
    <style type="text/css">

div p span {
    font: 18px arial;
    color: red;
}

div span {
    font: 18px arial;
    color: blue;
}

    </style>
</head>
<body>

<div>
    <p><span>Hello, world!</span></p>
    <span>Hello, world!</span>
</div>

</body>
</html>
4

As sites develop and become more complex you may find it easier to avoid specificity wars and do something simple like this…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<style type="text/css">
.greet {
	font: 18px arial;
	color: red;
}
</style>
</head>
<body>
<div>
		<p><span class="greet">Hello, world!</span></p>
</div>
</body>
</html>

The problem with div p span {} or indeed div span{} is that it is dependent on a certain structure in order to work and a few months down the line when the client wants another element in that mix you can’t add another span without it being effected by the rule you have put in place. A simple class avoids this dependence on structure and avoids specificity issues with longer selectors.

There are times and places to use things like div p span but only when you know they are well controlled and unlikely to change. I have found that in the past it was always cropping up to bite me when I wanted to add or change the html and found that I couldn’t just add a new element without it being affected by cascading styles so would first have to ‘undo’ styles before applying styles. If you find yourself constantly undoing styles then you are using the cascade inefficiently.

The bottom line is don’t be afraid to use classes as it makes for a more maintainable system.:slight_smile:

5

Thanks for the educational code on Ralph’s correct answer! :slight_smile:

6

Thank you very much for sharing your experience with us! Yes, as you said I’m designing a site for a client and should have stuck to class and ID in the first place! :slight_smile: