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)

Touber

It's one of the most commonly used bits of CSS. You can learn through repetition. I don't need a mnemonic. – Wisnicki

The same way how you remember that 2 comes after 1, and 3 comes after 2, etc. ... or that the past form of "do" is "did", ... – Flasher

What these guys said. If you need a gimmick to remember this basic CSS syntax, you're probably not going to get very far in the software world. Sorry. – Hazem

(In all seriousness, though, think of "Platform #3" or "Book #19" .. there's only one. It's an identifier, or "id".) – Hazem

I'm pleased for you all that you can remember something. I wasn't asking for personal attacks, just a mnemonic. I don't spend enough time a year with CSS (thank god) to warrant committing this to my long-term memory. Finite capacity, and all. – Touber

I wouldn't worry about your memory having a finite capacity. While that might be true in theory, you have a long way to go before you reach it. (And I don't mean that to imply you're stupid; that's true of anyone! I learn all kinds of new things every day, and I'm nowhere near capacity.) – Amphi

servermanfail, odds are a mnemonic is going to be longer and harder to remember that "dot class, pound id". – Phlogopite

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.

Marlowe

Thanks, I will use yours. You answered both the questions. – Touber

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.

Predict

I find the stupider something is the easier it is to remember. Nice! – Shephard

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

Shephard

You really only need one good mnemoic: CallerID shows a phone # (nicely done, btw). . is just the other. – Sambar

Strangely enough the . = pearl and pearls are classy has always worked better for me. But I'm a very visual learner. ¯_(ツ)_/¯ – Shephard

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.

Abran

Of course! smacks head I was stuck thinking that # was a channel - like a Twitter hash tag (goes to a group), or an IRC channel (group of people). – Touber

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.

Thorson

Answer 6

Spend lots of time writing CSS. When you've got it wrong enough times, your brain will give in and retain it.

Phlogopite

Thanks, would you like to pay me for spending lots of time writing CSS, as I do not enjoy it and limit myself in terms of minutes per year. – Touber