Выбрать теги по порядковому номеру можно с помощью псевдоклассов :nth-child и :nth-last-child (отсчет ведется от последнего элемента).

Пример выберет четвертый элемент, четвертый элемент с конца, четные и нечетные элементы списка (выражением может быть число или формула):

li:nth-child(4) {}
li:nth-last-child(4) {}
li:nth-child(2n){} / li:nth-child(odd) {}
li:nth-child(even) {}

Выбрать теги по порядковому номеру но с учетом типа элементов можно при помощи :nth-of-type.

Выбрать первый и последний дочерний элемент родителя можно с помощью псевдоклассов :first-child и :last-child.

Пример, выбираем первый и последний элемент списка:

li:first-child {}
li:last-child {}

С помощью псевдокласса :first-of-type можно выбирать первый дочерний элемент родителя (похоже на :first-child), но с учетом типа. А с помощью псевдокласса :last-of-type можно аналогично выбрать последний дочерний элемент родителя с учетом типа.

Псевдоклассы определяют динамическое состояние элементов. Примеры простых псевдоклассов:

:hover псевдокласс который позволяет выбрать элемент, когда на него наведен курсор мыши и кнопка мыши еще не нажата.
:active выбирает активные ссылки (кнопка мыши зажата на ссылке).
:link выбирает еще не посещенные ссылки.
:visited выбирает посещенные ссылки.
:focus позволяет выбрать элемент, который в данный момент в фокусе (например, текстовое поле, в которое установлен курсор).

Селектор в CSS — это указатель на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:

1. Селекторы по тэгам: h1

2. Селектор по id: #main

3. Селекторы по классам: .hidden

4. Селектор по нескольким классам

Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс .hidden и класс .closed.

.hidden.closed

<p class="red green">red or green? red!</p>
...
.green { color: green; }
.red { color: red; }