This article is currently in the process of being translated into Russian (~31% done).


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.


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.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!