class vs. style

Discussion in 'HTML' started by dfloss, Jan 18, 2007.

  1. dfloss

    dfloss Guest

    given this css:

    ..no_left_border {border-left: 0px solid}
    table td {border-left: 1px solid}

    <td class="no_left_border"> <-- doesn't work -->
    <td style="border-left: 0px solid"> <-- works -->

    Can someone explain the behind the scenes reasons?
     
    dfloss, Jan 18, 2007
    #1
    1. Advertising

  2. dfloss

    Ben C Guest

    On 2007-01-18, dfloss <> wrote:
    > given this css:
    >
    > .no_left_border {border-left: 0px solid}
    > table td {border-left: 1px solid}
    >
    ><td class="no_left_border"> <-- doesn't work -->
    ><td style="border-left: 0px solid"> <-- works -->
    >
    > Can someone explain the behind the scenes reasons?


    table td is more "specific" than .no_left_border, so wins. But the style
    attribute is more specific still.

    See http://www.w3.org/TR/CSS21/cascade.html, particularly 6.4.3
    "Calculating a selector's specificity".
     
    Ben C, Jan 18, 2007
    #2
    1. Advertising

  3. Scripsit Ben C:

    >> .no_left_border {border-left: 0px solid}
    >> table td {border-left: 1px solid}
    >>
    >> <td class="no_left_border"> <-- doesn't work -->
    >> <td style="border-left: 0px solid"> <-- works -->
    >>
    >> Can someone explain the behind the scenes reasons?

    >
    > table td is more "specific" than .no_left_border, so wins. But the
    > style attribute is more specific still.


    Right. So a practical conclusion is that you can affect this by using a more
    specific selector in the first rule, e.g.

    table td.no_left_border {border-left: 0px solid}

    (You could alternatively use !important, but it's easy to create confusion
    that way. Reserve !important for special occasions.)

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 18, 2007
    #3
  4. dfloss

    dorayme Guest

    In article <FFSrh.50393$>,
    dfloss <> wrote:

    > given this css:
    >
    > .no_left_border {border-left: 0px solid}
    > table td {border-left: 1px solid}
    >
    > <td class="no_left_border"> <-- doesn't work -->
    > <td style="border-left: 0px solid"> <-- works -->
    >
    > Can someone explain the behind the scenes reasons?


    But what is the question exactly? If you wondering why

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <STYLE TYPE='text/css'>
    .no_left_border {border-left: 0px solid}
    }
    </STYLE>
    </HEAD>

    <BODY>
    <table><tr>
    ..no_left_border {border-left: 0px solid}
    </td>
    </table>
    </BODY>
    </HTML>

    does not display a left border, it is because you have said not
    to have one (the proper way is ": 0" not "0px solid" btw)

    --
    dorayme
     
    dorayme, Jan 18, 2007
    #4
  5. dfloss

    dfloss Guest

    (the proper way is ": 0" not "0px solid" btw)

    css is cheap, html is expensive
     
    dfloss, Jan 18, 2007
    #5
  6. dfloss

    dorayme Guest

    In article <xwTrh.62507$>,
    dfloss <> wrote:

    > (the proper way is ": 0" not "0px solid" btw)
    >
    > css is cheap, html is expensive


    Why concentrate on the side issue instead of your main one?

    --
    dorayme
     
    dorayme, Jan 19, 2007
    #6
  7. dfloss wrote:
    > (the proper way is ": 0" not "0px solid" btw)
    >
    > css is cheap, html is expensive



    Not sure what that means but to fix your CSS:

    table td { border-left: 1px solid; }
    table td.no_left_border { border-left: 0; }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 19, 2007
    #7
  8. dfloss

    dfloss Guest

    > Not sure what that means but to fix your CSS:
    >
    > table td { border-left: 1px solid; }
    > table td.no_left_border { border-left: 0; }


    Thank you sir. That was exactly what I was looking for.
     
    dfloss, Jan 19, 2007
    #8
  9. Scripsit dorayme:

    >> Can someone explain the behind the scenes reasons?

    >
    > But what is the question exactly?


    The question was clear enough, though perhaps a bit too implicit. It was
    about explaining an apparently unintuitive behavior, and an explanation was
    given.

    > If you wondering why

    - -
    > does not display a left border,


    No, your clarification did not clarify anything. Your example contains
    several syntax errors in HTML and it lacks a crucial piece of code that was
    given in the question.

    > it is because you have said not to have one


    No, _you_ omitted the piece of code for that.

    > (the proper way is ": 0" not "0px solid" btw)


    What on &Planet; are you babbling? Using duplicate colons (as your
    suggestion would mean) makes a CSS declaration syntactically malformed so
    that conforming browsers ignore it. The values 0 and opx are (in the given
    context) completely equivalent. And not specifying border style in a
    declaration like
    border-left { ... }
    is equivalent to setting it to solid. Thus, you are just playing with
    irrelevant variation - in addition to suggesting an extra colon.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 19, 2007
    #9
  10. dfloss

    Robin Rattay Guest

    Hi,

    Jukka K. Korpela wrote:
    > Scripsit Ben C:
    >
    >>> .no_left_border {border-left: 0px solid}
    >>> table td {border-left: 1px solid}
    >>>
    >>> <td class="no_left_border"> <-- doesn't work -->
    >>> <td style="border-left: 0px solid"> <-- works -->

    >>
    >> table td is more "specific" than .no_left_border, so wins. But the
    >> style attribute is more specific still.

    >
    > Right. So a practical conclusion is that you can affect this by using a more
    > specific selector in the first rule, e.g.
    >
    > table td.no_left_border {border-left: 0px solid}


    I need to delurk for a moment, since I'm confused.

    I've re-read the CSS specification on specificity, and tested it in FF,
    resulting in the conclusion, that ".no_left_border" is more specific
    than "table td" (0010 verses 0002). So both examples of the OP should be
    showing no border, i.e. "working".

    Robin
     
    Robin Rattay, Jan 19, 2007
    #10
  11. dfloss

    Ben C Guest

    On 2007-01-19, Robin Rattay <> wrote:
    > Hi,
    >
    > Jukka K. Korpela wrote:
    >> Scripsit Ben C:
    >>
    >>>> .no_left_border {border-left: 0px solid}
    >>>> table td {border-left: 1px solid}
    >>>>
    >>>> <td class="no_left_border"> <-- doesn't work -->
    >>>> <td style="border-left: 0px solid"> <-- works -->
    >>>
    >>> table td is more "specific" than .no_left_border, so wins. But the
    >>> style attribute is more specific still.

    >>
    >> Right. So a practical conclusion is that you can affect this by using a more
    >> specific selector in the first rule, e.g.
    >>
    >> table td.no_left_border {border-left: 0px solid}

    >
    > I need to delurk for a moment, since I'm confused.
    >
    > I've re-read the CSS specification on specificity, and tested it in FF,
    > resulting in the conclusion, that ".no_left_border" is more specific
    > than "table td" (0010 verses 0002). So both examples of the OP should be
    > showing no border, i.e. "working".


    You're right, I just read that section again (6.4.3), and everything you
    say is correct. I spoke too soon. I also tried it in Opera and Konqueror
    and it worked as expected.
     
    Ben C, Jan 19, 2007
    #11
  12. dfloss

    Toby Inkster Guest

    Toby Inkster, Jan 19, 2007
    #12
  13. dfloss

    dorayme Guest

    In article <z2_rh.7052$U%>,
    "Jukka K. Korpela" <> wrote:

    > Scripsit dorayme:
    >
    > >> Can someone explain the behind the scenes reasons?

    > >
    > > But what is the question exactly?

    >
    > The question was clear enough, though perhaps a bit too implicit. It was
    > about explaining an apparently unintuitive behavior, and an explanation was
    > given.
    >
    > > If you wondering why

    > - -
    > > does not display a left border,

    >
    > No, your clarification did not clarify anything. Your example contains
    > several syntax errors in HTML and it lacks a crucial piece of code that was
    > given in the question.


    I am sorry, you are right, it was a dreadful misreading of the OP
    for a start and sloppy cutting and pasting in my reply to what I
    too hastily thought was a newbie error. I am going into the
    backyard now to hit myself repeatedly with a 2" x 4" piece of
    hardwood. Stand by for better quality posts.

    --
    dorayme
     
    dorayme, Jan 19, 2007
    #13
  14. Scripsit Robin Rattay:

    > I need to delurk for a moment, since I'm confused.


    Fine. (I mean your delurking, not confusion. :) )

    > I've re-read the CSS specification on specificity, and tested it in
    > FF, resulting in the conclusion, that ".no_left_border" is more
    > specific than "table td" (0010 verses 0002). So both examples of the
    > OP should be showing no border, i.e. "working".


    You are quite right. I was careless enough to think only in terms of names
    in a selector, but indeed the context matters: any selector with at least
    one class selector has higher specificity than a selector that contains
    element names only.

    So I guess we'd next need to know where it didn't work. The OP probably had
    a syntax error somewhere and that error was fixed when he tried some of the
    suggestions. As usual, posting a URL would have saved some time and effort.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 19, 2007
    #14
  15. dfloss

    Roy A. Guest

    Ben C skrev:
    > On 2007-01-18, dfloss <> wrote:
    > > given this css:
    > >
    > > .no_left_border {border-left: 0px solid}
    > > table td {border-left: 1px solid}
    > >
    > ><td class="no_left_border"> <-- doesn't work -->
    > ><td style="border-left: 0px solid"> <-- works -->
    > >
    > > Can someone explain the behind the scenes reasons?

    >
    > table td is more "specific" than .no_left_border, so wins. But the style
    > attribute is more specific still.
    >
    > See http://www.w3.org/TR/CSS21/cascade.html, particularly 6.4.3
    > "Calculating a selector's specificity".


    I notice that the pseudo-classes :link, :visited, :active, :focus,
    :hover have the same weight.

    According to these rules, putting these classes in a certain order in
    the stylesheet doesn't make sense. By using an element name before the
    pseudo-class, e.g. a:active, would ensure that this style take
    precedence. But, is there any default cascading order for these
    classes? I suspect it is vendor specific.
     
    Roy A., Jan 20, 2007
    #15
  16. dfloss

    Ben C Guest

    On 2007-01-20, Roy A. <> wrote:
    >
    > Ben C skrev:
    >> On 2007-01-18, dfloss <> wrote:
    >> > given this css:
    >> >
    >> > .no_left_border {border-left: 0px solid}
    >> > table td {border-left: 1px solid}
    >> >
    >> ><td class="no_left_border"> <-- doesn't work -->
    >> ><td style="border-left: 0px solid"> <-- works -->
    >> >
    >> > Can someone explain the behind the scenes reasons?

    >>
    >> table td is more "specific" than .no_left_border, so wins.


    This was wrong: .no_left_border is more specific than table td.

    >> But the style
    >> attribute is more specific still.
    >>
    >> See http://www.w3.org/TR/CSS21/cascade.html, particularly 6.4.3
    >> "Calculating a selector's specificity".

    >
    > I notice that the pseudo-classes :link, :visited, :active, :focus,
    >:hover have the same weight.


    They all affect specificity equally, yes.

    > According to these rules, putting these classes in a certain order in
    > the stylesheet doesn't make sense. By using an element name before the
    > pseudo-class, e.g. a:active, would ensure that this style take
    > precedence. But, is there any default cascading order for these
    > classes? I suspect it is vendor specific.


    It's all specified, see 6.4.1. You sort by origin, then by specificity,
    and finally by the order in which they appeared. There should be always
    one and only one right answer for what styles an element should get from
    the cascade.
     
    Ben C, Jan 20, 2007
    #16
  17. dfloss

    Roy A. Guest

    Ben C skrev:

    > > According to these rules, putting these classes in a certain order in
    > > the stylesheet doesn't make sense. By using an element name before the
    > > pseudo-class, e.g. a:active, would ensure that this style take
    > > precedence. But, is there any default cascading order for these
    > > classes? I suspect it is vendor specific.

    >
    > It's all specified, see 6.4.1. You sort by origin, then by specificity,
    > and finally by the order in which they appeared. There should be always
    > one and only one right answer for what styles an element should get from
    > the cascade.


    Ah, I see. Given <a href="#">link</a> and

    :active { color: black } :hover { color: lime }

    the latter wins.

    Similarly. Given <td class="no_left_border left_border"> and

    ..left_border {border-left: 1px solid}
    ..no_left_border {border-left: 0px solid}

    the latter (in the stylesheet) wins.

    Now it make sense to me to.
     
    Roy A., Jan 20, 2007
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. E11
    Replies:
    1
    Views:
    4,842
    Thomas Weidenfeller
    Oct 12, 2005
  2. christopher diggins
    Replies:
    16
    Views:
    769
    Pete Becker
    May 4, 2005
  3. dlo_olb
    Replies:
    2
    Views:
    2,333
    Fredrik Lundh
    Jun 25, 2003
  4. Ken Varn
    Replies:
    0
    Views:
    492
    Ken Varn
    Apr 26, 2004
  5. Jayden
    Replies:
    9
    Views:
    300
    alex23
    Sep 27, 2012
Loading...

Share This Page