SitePoint Sponsor

User Tag List

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

    Which CSS selector?

    Sometimes I find it difficult to choose the right CSS selector. Consider this, for example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Which CSS selector</title>
        <style>
            [for="married"] {
                outline: 1px solid red;
            }
        </style>
    </head>
    
    <body>
        <form>
            <label for="name">Name</label>
            <input type="text" id="name">
            <label for="married">Married</label>
            <input type="checkbox" id="married">
        </form>
    </body>
    
    </html>
    I can get the same result with:

    • label:nth-child(3)
    • label:nth-of-type(2)
    • #name + label
    • etc.


    I can even give the element an ID and get it directly. But isn't it better to keep your HTML tidier/smaller?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    isn't it better to keep your HTML tidier/smaller?
    Sure, but within reason. It's no big deal to add a special class where needed, although in this case [for="married"] is fine. Just consider support in older browsers if it matters to you.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    never be afraid to use your nogin!
    if you find that there is more more than one way to skin a cat, then use the one most suited to your goal.

    for example.

    IDs will taget your element yes, but they cant be repeated and and have some serious CSS heft. On the other hand if you also need to feed that element to a JS.. IDs are pretty handy. So if the element was IN DEED unique to the page OR BETTER YET if you needed the ID anyway for .js then why not take advantage of it in your CSS?


    Same deal with the attr selector, unless you are supporting REALLY OLD browser, and you need the 'for' attribute, why not take advantage of it as a CSS selector as well.


    Classes are almost ubiquitous solutions ( the only downside being you have to add the class to your mark up)

    and descendant selectors are great because, theoretically, they allow you to target elements w/o ANY alteration to your mark up. But the downside to that is that your CSS is now intrinsically tied to your HTML structure; deviate from that structure and you could have a hot mess on your hands. Also, some IE versions registered comments as elements.
    for example:

    Code:
    <p></p><--!IE eats glue--><p><b>I dont eat glue!</b></p>
    p+p>b { display:none;}
    Older IE will not honer this rule ; since it sees the comment as an element so there is no p immediately following another p.

    hope that helps.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    never be afraid to use your nogin!
    if you find that there is more more than one way to skin a cat, then use the one most suited to your goal.

    for example.

    IDs will taget your element yes, but they cant be repeated and and have some serious CSS heft. On the other hand if you also need to feed that element to a JS.. IDs are pretty handy. So if the element was IN DEED unique to the page OR BETTER YET if you needed the ID anyway for .js then why not take advantage of it in your CSS?


    Same deal with the attr selector, unless you are supporting REALLY OLD browser, and you need the 'for' attribute, why not take advantage of it as a CSS selector as well.


    Classes are almost ubiquitous solutions ( the only downside being you have to add the class to your mark up)

    and descendant selectors are great because, theoretically, they allow you to target elements w/o ANY alteration to your mark up. But the downside to that is that your CSS is now intrinsically tied to your HTML structure; deviate from that structure and you could have a hot mess on your hands. Also, some IE versions registered comments as elements.
    for example:

    Code:
    <p></p><--!IE eats glue--><p><b>I dont eat glue!</b></p>
    p+p>b { display:none;}
    Older IE will not honer this rule ; since it sees the comment as an element so there is no p immediately following another p.

    hope that helps.
    Thanks for the explanation!

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Sometimes I find it difficult to choose the right CSS selector. Consider this, for example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Which CSS selector</title>
        <style>
            [for="married"] {
                outline: 1px solid red;
            }
        </style>
    </head>
    
    <body>
        <form>
            <label for="name">Name</label>
            <input type="text" id="name">
            <label for="married">Married</label>
            <input type="checkbox" id="married">
        </form>
    </body>
    
    </html>
    I can get the same result with:

    • label:nth-child(3)
    • label:nth-of-type(2)
    • #name + label
    • etc.


    I can even give the element an ID and get it directly. But isn't it better to keep your HTML tidier/smaller?
    What you've got looks good to me, with a class/ID directly on the element if you don't have a handy attribute selector to use. I wouldn't consider any of the other options you've given as appropriate in this case – there are valid use cases for each of those constructions, but they don't fit what you're doing here. Why not? Think about what happens if you re-order the code, or add extra elements.
    • label:nth-child(3) will always target the third child of a parent when it is a label. That might not match any elements, let alone the right one, if you change your form around.
    • label:nth-of-type(2) is better because you know it will always hit a label, but you've no guarantee it will be the right one if you decide to shuffle the form round or add an extra question.
    • #name + label will hit the label following the input with ID of 'name', but again, what happens if you want to add an extra question? You want your CSS to be robust and to survive those kind of changes intact, and there's no reason why it shouldn't be able to if you choose your selectors properly.
    • etc. is not a valid selector

  6. #6
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    What you've got looks good to me, with a class/ID directly on the element if you don't have a handy attribute selector to use. I wouldn't consider any of the other options you've given as appropriate in this case – there are valid use cases for each of those constructions, but they don't fit what you're doing here. Why not? Think about what happens if you re-order the code, or add extra elements.
    • label:nth-child(3) will always target the third child of a parent when it is a label. That might not match any elements, let alone the right one, if you change your form around.
    • label:nth-of-type(2) is better because you know it will always hit a label, but you've no guarantee it will be the right one if you decide to shuffle the form round or add an extra question.
    • #name + label will hit the label following the input with ID of 'name', but again, what happens if you want to add an extra question? You want your CSS to be robust and to survive those kind of changes intact, and there's no reason why it shouldn't be able to if you choose your selectors properly.
    • etc. is not a valid selector
    Thanks for the advice and good sense of humor!


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
  •