Introduction to CSS Selectors

Мы уже кратко поговорили о селекторах в главе об анатомии CSS, но, как вы скоро поймете, селекторы бывают разных типов и в различных комбинациях. Селекторы могут быть чрезвычайно мощными, и большинство стилей не было бы возможно без них.

Как уже упоминалось, селектор инкапсулирует одно или несколько свойств, которые диктуют поведение и ищут определенный элемент. Круто в селекторах то, что они позволяют вам обрабатывать элемент разными способами, в разных состояниях, в разных иерархиях и даже несколько элементов одновременно.

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.