CSS question concerning id and class

Discussion in 'HTML' started by Deryck, Dec 21, 2004.

  1. Deryck

    Deryck Guest

    Hello,

    I just inherited something from a designer and some of the CSS looks a
    little strange.
    Is the following legitimate:

    <div class="cat-promo-box" id="promo-box1">

    I thought a div would be class or id, but not both.

    Thanks in anticipation,

    Deryck
     
    Deryck, Dec 21, 2004
    #1
    1. Advertising

  2. "Deryck" <> skrev i melding
    news:...
    > Hello,
    >
    > I just inherited something from a designer and some of the CSS looks a
    > little strange.
    > Is the following legitimate:
    >
    > <div class="cat-promo-box" id="promo-box1">
    >
    > I thought a div would be class or id, but not both.


    Yes, it's perfectly fine to do that, especially when you want a <div> to
    inherit the properties of a certain class as well as adding/modifying some
    properties unique to it (by using id in addition).

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
     
    Kim André Akerø, Dec 21, 2004
    #2
    1. Advertising

  3. On Tue, 21 Dec 2004 18:30:29 -0000, Deryck <> wrote:

    > Hello,
    >
    > I just inherited something from a designer and some of the CSS looks a
    > little strange.
    > Is the following legitimate:
    >
    > <div class="cat-promo-box" id="promo-box1">
    >


    I don't think there is anything wrong here.

    > I thought a div would be class or id, but not both.
    >


    You can combine id's and classes with one element. No problem. Whether it is
    useful depents fully on the context (markup, styles).


    --
    ,------------- PretLetters: 'woest wyf', met vele interesses: --------------.
    | weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html> |
    | webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html> |
    | zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html> |
    `---------------------------------------------------------------------------'
     
    Barbara de Zoete, Dec 21, 2004
    #3
  4. Deryck

    Deryck Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:psjdfrn1bx5vgts@zoete_b...
    >>
    >> <div class="cat-promo-box" id="promo-box1">
    >>

    >
    > I don't think there is anything wrong here.
    >
    >> I thought a div would be class or id, but not both.
    >>

    >
    > You can combine id's and classes with one element. No problem. Whether it
    > is useful depents fully on the context (markup, styles).
    >

    Thanks Barbara. I appreciate the quick reply.

    Deryck
     
    Deryck, Dec 21, 2004
    #4
  5. Deryck

    SpaceGirl Guest

    Deryck wrote:
    > Hello,
    >
    > I just inherited something from a designer and some of the CSS looks a
    > little strange.
    > Is the following legitimate:
    >
    > <div class="cat-promo-box" id="promo-box1">
    >
    > I thought a div would be class or id, but not both.
    >
    > Thanks in anticipation,
    >
    > Deryck
    >
    >


    example, which simply demonstrates how it works (and, perhaps why!):


    <style type="text/stylesheet">
    #mybox {border:10px solid black; width:200px;}

    ..red {color:red}
    ..black {color:black}

    </style>

    <div id="mybox" class="black"> hello world </div>
    <div class="red"> hello world </div>
    <div class="black"> hello world </div>


    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Dec 21, 2004
    #5
  6. Deryck

    Richard Guest

    Deryck wrote:

    > Hello,


    > I just inherited something from a designer and some of the CSS looks a
    > little strange.
    > Is the following legitimate:


    > <div class="cat-promo-box" id="promo-box1">


    > I thought a div would be class or id, but not both.


    > Thanks in anticipation,


    > Deryck


    Many times a writer might use "class" purely as a division name.

    <div class="cat" id="lion">
    <div class="cat" id="tiger">

    With nothing to define what "class" is, nothing is executed.
    Since class can be reused as often as desired, but not an ID.
     
    Richard, Dec 21, 2004
    #6
  7. Deryck

    Toby Inkster Guest

    Deryck wrote:

    > <div class="cat-promo-box" id="promo-box1">
    >
    > I thought a div would be class or id, but not both.


    A DIV (or indeed most elements) can take both a class and an ID. Indeed it
    can take more than one class (but only one ID).

    e.g.:

    <div class="big red yellowbg" id="warningbox">
    ....
    </div>

    has three classes and one ID.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Dec 22, 2004
    #7
  8. Deryck

    Andy Dingley Guest

    On Wed, 22 Dec 2004 00:28:52 +0000, Toby Inkster
    <> wrote:

    ><div class="big red yellowbg" id="warningbox">


    >has three classes and one ID.


    What are people's current expectations of having multiple classes work
    satisfactorily (for CSS selectors), given the usual low standards of
    browser bugginess ?
     
    Andy Dingley, Dec 22, 2004
    #8
  9. Deryck

    rf Guest

    Andy Dingley wrote:
    > On Wed, 22 Dec 2004 00:28:52 +0000, Toby Inkster
    > <> wrote:
    >
    > ><div class="big red yellowbg" id="warningbox">

    >
    > >has three classes and one ID.

    >
    > What are people's current expectations of having multiple classes work
    > satisfactorily (for CSS selectors), given the usual low standards of
    > browser bugginess ?


    Even IE5.0 understands it.

    --
    Cheers
    Richard.
     
    rf, Dec 22, 2004
    #9
  10. Deryck

    Steve Pugh Guest

    On Wed, 22 Dec 2004 01:18:19 +0000, Andy Dingley
    <> wrote:
    >On Wed, 22 Dec 2004 00:28:52 +0000, Toby Inkster
    ><> wrote:
    >
    >><div class="big red yellowbg" id="warningbox">

    >
    >What are people's current expectations of having multiple classes work
    >satisfactorily (for CSS selectors), given the usual low standards of
    >browser bugginess ?


    Works in IE5+, Gecko, Opera (from several versions ago at least),
    Safari (and hence I'd assume Konqueror) .
    Doesn't work in Netscape 4.
    Don't know about IE4 and anything more obscure.

    That's assuming the CSS is defining each class separately. I've not
    done any tests with selectores along the lines of div.foo.bar but I'd
    expect the results will be the same as above.

    Steve
     
    Steve Pugh, Dec 22, 2004
    #10
  11. Deryck

    Deryck Guest

    "Deryck" <> wrote in message
    news:...
    > Hello,

    <Snip my question>

    Thanks to all those who replied especially those who included example code
    tidbits. I appreciate your help and genuflect in your direction.

    Deryck
     
    Deryck, Dec 22, 2004
    #11
  12. Deryck

    Kris Guest

    In article <>,
    Andy Dingley <> wrote:

    > ><div class="big red yellowbg" id="warningbox">

    >
    > >has three classes and one ID.

    >
    > What are people's current expectations of having multiple classes work
    > satisfactorily (for CSS selectors), given the usual low standards of
    > browser bugginess ?


    I use them all the time and it works reliably in IE5+ and standards
    abiding browsers.

    --
    Kris
    <> (nl)
     
    Kris, Dec 22, 2004
    #12
  13. Deryck

    Kris Guest

    In article <>,
    Steve Pugh <> wrote:

    > >What are people's current expectations of having multiple classes work
    > >satisfactorily (for CSS selectors), given the usual low standards of
    > >browser bugginess ?

    >
    > Works in IE5+, Gecko, Opera (from several versions ago at least),
    > Safari (and hence I'd assume Konqueror) .
    > Doesn't work in Netscape 4.
    > Don't know about IE4 and anything more obscure.
    >
    > That's assuming the CSS is defining each class separately. I've not
    > done any tests with selectores along the lines of div.foo.bar but I'd
    > expect the results will be the same as above.


    <element id="foo" class="bar">

    IE/Win has trouble understanding constructions like

    #foo.bar { ... }

    Though it is not the same, the following could ease some pain:

    # foo { ... }

    ..bar { ... }

    --
    Kris
    <> (nl)
     
    Kris, Dec 22, 2004
    #13
    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. Jatinder Singh
    Replies:
    4
    Views:
    446
    Steve Holden
    Jun 1, 2005
  2. Sean Quinn
    Replies:
    4
    Views:
    313
    Sean Quinn
    Jul 16, 2005
  3. Fabio
    Replies:
    0
    Views:
    324
    Fabio
    Nov 5, 2008
  4. SStory
    Replies:
    1
    Views:
    159
    SStory
    Sep 22, 2003
  5. Oliver Andrich
    Replies:
    8
    Views:
    121
    Oliver Andrich
    Dec 7, 2005
Loading...

Share This Page