SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Specificity confusion

    Hi All,

    OK I'm stumped on a really stupid problem. I must be misunderstanding the rules of Specificity.

    Given HTML:
    ....
    <input class="left_Input_Field" id="gender" type="text" name="gender"/>
    .....

    CSS

    .left_Input_Field#gender{
    : declarations
    }

    fails

    CSS

    input#gender{
    : declarations
    }

    works and successfully inherits from .left_Input_Field.

    Whereas:

    Given HTML:
    ....
    <a class="header_Row" id="header1">Header</a>
    .....

    CSS

    .header_Row#header1{
    : declarations
    }

    works


    Question:

    Whilst the CSS work just fine I am a bit baffled why the CSS

    .left_Input_Field#gender{
    : declarations
    }

    doesn't work which suggests that I am failing to fully understand the cascade. I am missing something here is it with regard to the <input> tag as opposed to <a> or indeed any other tag. I only get this issue on <input>.

    Thanks

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by codepuppy View Post
    Whilst the CSS work just fine I am a bit baffled why the CSS

    .left_Input_Field#gender{
    : declarations
    }

    doesn't work which suggests that I am failing to fully understand the cascade. I am missing something here is it with regard to the <input> tag as opposed to <a> or indeed any other tag. I only get this issue on <input>.
    Just so I can check what you mean by "fails" and "doesn't work" ... what exactly is not happening that you think should be happening?

    When I try using <input class="class1" id="id2"> and style it with .class1#id2 {border:1px blue solid;}, I get a text field with a blue border as I expected.

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stevie D,

    I think I got the selector completely confused. My bad. I was looking for the descendent therefore should have had a space.

    Went crossed eyed looking for it. But pretty sure that was the problem.

    Rgds


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
  •