SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS subchild selector

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

    Code:
    <style>
        div p span {
            font: 18px arial;
            color: red;
        }
    </style>
    <div>
        <p>
            <span>
    Hello, world!
    </span>
        </p>
    </div>
    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Here's an example showing exactly what Ralph just said
    Code:
    <!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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    As sites develop and become more complex you may find it easier to avoid specificity wars and do something simple like this..

    Code:
    <!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.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Here's an example showing exactly what Ralph just said
    Now we examine the effect of specificity. The "heavier" style overrides the "weaker", less specific style.
    Thanks for the educational code on Ralph's correct answer!

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •