.class V Element selectors in CSS

[eclipse]

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?

 

[ergdegdeg]

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.

 

[eclipse]

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?

 

[angelwatt]

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.

<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:

li.odd { color: #000; background: #fff; }
li.even { color: #fff; background: #000; }
ol .even, ol .odd { font-weight: bold; }

 

[SrWebDeveloper]

@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:

ID - a unique identifier to mark an element

Class - mark elements as members of a group and can be used multiple times

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

 

[memco]

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).

 

[eclipse]

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.