Symbols in CSS? . # etc?

Does anyone have a link that explains the usage of the various symbols in CSS?

Basically I’m looking for something that give me context for understanding:

foo{}
vs
.foo{}
vs
#foo{}
etc

My websearches aren’t really fruitful.

The 30 CSS Selectors You Must Memorize

If I understand you correctly, you want a cliff notes version of the different CSS selectors. The above link is a good start.

In your example above, the first one is just using the element name as the selector. There is no element foo in HTML so to be realistic your example should probably be something like:

p { }

This selects all the p elements on the page.

Thank you. That’s exactly what I was looking for.

And “foo” is just a generic placeholder term. They even used it in a couple of examples on that page you linked.

It’s often seen in documentation for DNS servers eg: foo.bar as it doesn’t actually resolve to a domain called foo on a top level domain called bar.

It’s a phonetic match for the acronym f.u.b.a.r. Likely the person writing the original documentation for their DNS server implementation was being cheeky there, and it just kind of stuck around as an unresolvable domain across many different sets of documentation, similar to how you’ll see “Hello World!” used in MANY programming language courses as one of the first projects outputting to the user.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.