CSS Mnemonics: How do you remember whether # or . is for class or id?

Question

#test is the selector for id="test"

.test is the selector for class="test"

but how do you remember which way round they are (eg not .=id)

Answer 1

Well, in truth these things are so common that most people don't need mnemonics to remember them, but here's something I came up with, if it helps:

In terms of a filename a . and then an extension denotes a type of thing. There can be many different things of this type. With CSS, using classes you can denote a single style for many elements of the same type.

In terms of a URL, a # denotes an anchor link to a specific spot in the document. It refers to one location only. With CSS, using IDs you denote a single style for a single specific element.

Answer 2

If a police officer catches you with "hash," he will ask to see your ID. If not you get to stay classy. It's really dumb, but that's how I remember.

Answer 3

• CallerID shows a phone #.
• Periods are round like pearls, and-- Pearls are classy.

(P.S.: What's with all the "you learn differently than me, so you suck" comments? Goodness. Repetition is OK for me, but if I can visualize something I pick things up more quickly. In fact, the weirder something is the easier it is to memorize!)

Answer 4

I learned it the same way I learned that quotes (rather than parentheses) are used for attributes' values — by typing them a couple of times.

If you or someone you know gets tripped up by # vs ., though, consider that many programming languages use a . to access the members of an class-typed object.

Answer 5

I see I'm a day late (and maybe a dollar short), but I had the same problem in the early days and the following helped: for the dot (.) as the selector for Class, I remembered it as: "My class always starts on the dot, not a minute early or late." for the number sign (#) for ID, I just reminded myself that an ID(entification) card is incomplete without its number.