.class V Element selectors in CSS

Discussion in 'Web Design and Development' started by eclipse, Dec 3, 2008.

  1. eclipse macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #1
    OK,
    Now I'm trying to understand the difference between various thingemy's in CSS.

    We have ID's and, as highlander always said, "There can be only ONE!" (on each page). That's "just the rule with ID's. OK, don't know why, but OK.

    Then we have, say, headings H1 H2 etc... or "element selectors".

    h1 { etc etc etc


    Then we have .class selectors that apply to all bits labelled that way in the html in the document.

    .leader is the example for the leading paragraph.

    When do I use a class and when an element sector? It seems to me like I could make all my CSS .class selectors or all element selectors, depending on which involved less typing. Which one for what job?
     
  2. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #2
    You use classes, when you want to modify only a few of the elements on the page. Let's say you have something like the forums here. Every post would be in its respective div and that div would be the class "post" (just an example). Thus you can define styles for all posts but still make all other divs (e.g. quotes, navigation) look different.
     
  3. eclipse thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #3
    OK, so an "element" is something as basic as lots of paragraphs or headings? So we could have lots of the same element (like paragraph) but some paragraphs of text might be quotes, and we might want the first paragraph to be a special "class" of the paragraph?

    We're all human beings, but we don't have have the same style or "class". ;) So element = paragraph of text (as marked in the html), but "class" = "special paragraph", it's more targeted and specific?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Here's an example using some lists where classes are used to create alternating colored rows (of the list), and a different type of list also displays the text in bold, but still uses the same class names.
    HTML:
    <ul>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
    </ul>
    <ol>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
      <li class="odd">stuff</li>
      <li class="even">stuff</li>
    </ol>
    CSS:
    Code:
    li.odd { color: #000; background: #fff; }
    li.even { color: #fff; background: #000; }
    ol .even, ol .odd { font-weight: bold; }
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    @eclipse

    I sense some confusion, still. Let's get back to basics. According to the W3C, ID's and classes are two types of selectors assigned to any elements (which may be any HTML element, including p, div or span tags) defined as follows:

    Thw W3C had this in mind when trying to create the terminology to explain both principles:
    • ID = A person's Identification (ID) is unique to one person.
    • Class = There are many people in a class.
    So when assigning id's or classes to elements, think in that manner and it should all make sense. Use the excellent examples given by other respondents here to see these principles in action in the real world of CSS.

    -jim
     
  6. memco macrumors 6502

    Joined:
    May 1, 2008
    #6
    I think you've sort of got it. However, I should note that classes don't have to apply to the same type of element. So for example, you can have a class for indent, and apply indenting to any h*, p, td whathaveyou that needs it. (NOTE: may not be the best way to go about this, but it illustrates the flexibility of classes).
     
  7. eclipse thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #7
    OOooooopssss... tired, forgot I already asked about free coders over here.

    Thanks all for your help, I think I get it now. A big thank you.
     

Share This Page