Introduction to CSS Selectors

We already briefly talked about selectors in the chapter on the anatomy of CSS, but as you will soon realize, selectors comes in many different flavors and in various combinations. Selectors can be extremely powerful and most styling would not be possible without them.

As already mentioned, a selector encapsulates one or several properties, which dictates behavior and look for a certain element. The cool thing about selectors is that they allow you to target an element in different ways, in different states, in various hierarchies and even several elements at the same time.

Naming your selectors

Basically, a selector name must begin with an underscore (_), a hyphen (-), or a letter (a-z) and then be followed by any number of hyphens, underscores, letters, or numbers. When naming your selectors, there are some characters that you can't use, usually because they have a special meaning - these will be covered later on in this tutorial.

Summary

A selector is a name and one or several properties. In the next chapters, I'll show you all the ways you can use a selector and to demonstrate it, I will be using several CSS properties. You might not know them all by now, or perhaps none of them at all, but don't worry - they will all be explained later on. I include them now because empty selectors doesn't really give a good impression on how CSS works, but feel free to jump around in this tutorial as you please if you want to know more about the properties used.