www.webdeveloper.com
Results 1 to 11 of 11

Thread: ID selector doesn't format everything in it...

  1. #1
    Join Date
    May 2013
    Posts
    7

    ID selector doesn't format everything in it...

    Hi everyone.

    I'm just learning HTML5 and CSS3 and have hit a stumbling block.

    I am using an external style sheet and trying to color all elements within a <section id="faq">. They are an h2, h3 and p. The only sequence that gives me the desired effect is this:

    #faq,
    #faq p {
    color: hsl(298, 20%, 39%);
    }

    But from what I understand, I shouldn't have to repeat the #faq to color p(?) If I don't repeat it, the p is colored, but not the h2 and h3. Shouldn't the ID tag make it easy to color EVERYTHING within that <section>?

    Am I missing something?

    Thanks,
    B.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Try the asterisk to target everything within:

    Code:
    #faq * {color: hsl(298, 20%, 39%);}

  3. #3
    Join Date
    May 2013
    Posts
    7
    Hey cb Vision - you ROCK!! Thank you! I've asked a handful of people, some of whom said my code is fine as it is with the repeated selector, and others who didn't quite know what else to do. I just tried your advice and it was the perfect solution! Thanks again!

    B.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Awesome, glad it worked! Good luck with the site!

  5. #5
    Join Date
    Aug 2006
    Posts
    1,934
    You might show your full code. I think there's something you haven't shown us in the above snippet, that's coloring your text with more specificity than the simple #faq {color...} style.

    Dave

  6. #6
    Join Date
    May 2013
    Posts
    7
    Hi tracknut.

    Thanks for your post.

    Well, I'm posting my updated code below. But before you look at it, I'll explain:

    I wanted everything within my #faq section to be colored the same by using a shorthand approach, and without having to repeat #faq three times within the rule. cbVision helped me to get that effect by suggesting the *. Then I noticed that my links were not responding to the styles I set for them, even though the link declarations were located AFTER the #faq one. I suppose this means that the wildcard overides everything - regardless of location.

    So I went back to repeating #faq three timest gives me what I was looking for. However, I have a new question: is there a way to use * and then give an exception? For example: #faq * (except for such and such element)?

    Thanks,
    B.

    ------------------------------------------------------------------------------

    html {
    font-size: 100%;
    line-height: 1.3;
    }

    /* font sizing fallback for unsupported browsers: using "px" alongside "rem" */

    body p {
    font: 10px 1.0rem "Times New Roman", serif;
    }

    h1,
    h2,
    h3,
    h4 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    h1 {
    font: bold 28px; font-size: 2.8rem;
    }

    h2 {
    font: bold 20px; font-size: 2.0rem;
    }

    h3 {
    font: bold 14px; font-size: 1.4rem
    }

    p {
    color:rgb(107, 107, 107);
    }

    #faq p,
    #faq h2,
    #faq h3 {
    color:rgb(92, 54, 128);
    }

    #faq h2 {
    font: bold 18px; font-size: 1.8rem;
    }

    a:link {
    color: blue;
    }

    a:visited {
    color: green;
    }

    a:focus {
    color: red;
    }

    a:hover {
    color: orange;
    }

    a:active {
    color: purple;
    }

  7. #7
    Join Date
    Aug 2006
    Posts
    1,934
    So here's your code with some html to do the test:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 1</title>
    <style type="text/css">
    html {
    font-size: 100%;
    line-height: 1.3;
    }
    
    /* font sizing fallback for unsupported browsers: using "px" alongside "rem" */
    
    body p {
    font: 10px 1.0rem "Times New Roman", serif;
    }
    
    h1,
    h2,
    h3,
    h4 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    }
    
    h1 {
    font: bold 28px; font-size: 2.8rem;
    }
    
    h2 {
    font: bold 20px; font-size: 2.0rem;
    }
    
    h3 {
    font: bold 14px; font-size: 1.4rem
    }
    
    p {
    color:rgb(107, 107, 107);
    }
    
    #faq /*p ,
    #faq h2,
    #faq h3*/ {
    color:rgb(92, 54, 128);
    }
    
    #faq h2 {
    font: bold 18px; font-size: 1.8rem;
    }
    
    a:link {
    color: blue;
    }
    
    a:visited {
    color: green;
    }
    
    a:focus {
    color: red;
    }
    
    a:hover {
    color: orange;
    }
    
    a:active {
    color: purple;
    }
    </style>
    </head>
    
    <body>
    <section id="faq">
    <h2>Heading</h2>
    <p>Paragraph text and <a href="#">link to something</a></p>
    <h3>heading 3</h3>
    </section>
    </body>
    
    </html>
    Take a look and let me know what's not working as expected. I commented out the repeated colors within the #faq. The <p> tag is gray because you've specified it as such just before the #faq styles, but your link styles seem fine to me.

    Dave

  8. #8
    Join Date
    May 2013
    Posts
    7
    Hi tracknut.

    Thanks again. Yes, your code gives me the same appearance of the items. The issue I had with the links not reflecting the proper style was because I used the wildcard *. This must've overidden everything.

    So I wasn't left with much choice but to repeat the #faq three times. It works, I just wanted my code as slim as possible, that's all.

    Thanks again so much for your help!
    B

  9. #9
    Join Date
    Aug 2006
    Posts
    1,934
    I'm confused, why are you having to repeat the #faq three times? My example didn't repeat them - did it not work right?

  10. #10
    Join Date
    May 2013
    Posts
    7
    Hi tracknut.

    By repeating the #faq three times, ALL of the elements within the #faq are colored - just as I want them to be.

    With your version of the code (which is also something I tried earlier) the <p> text within #faq adheres to the previous style rule - even if I change the order and put the #faq rule first.

    So repeating #faq three times is the only way it all works out fine and dandy.

    B.

  11. #11
    Join Date
    Aug 2006
    Posts
    1,934
    Ah, I see where you're going. The reason the p tag is colored differently is that you explicitly set it, with:
    Code:
    p {
    color:rgb(107, 107, 107);
    }
    The h2 and h3 tags that you didn't set are not part of this problem, and the color, even if just set once on the #faq style, will cascade down to the elements within the #faq, as long as you don't explicitly change them. So I'd use two selectors, like:
    [code]
    #faq, #faq p {color.... }
    [code]

    The other option would be to not set a color style for "p" above, but set it more explicitly to where those tags are. That may or may not be convenient, depending on how the rest of your document is structured.

    Dave

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles