Как работает псевдо-класс?

Рейтинг: 0Ответов: 1Опубликовано: 10.02.2015

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

Я только начинаю осваивать css и в гугле нашел пример "красивого нумерованного списка" (ссылку на который я не покажу, чтобы не сочли рекламой), который состоял из следующего кода:

ol{
  counter-reset: rowsCount; // 1
}

li{
  list-style: none; // 2
}

li:before {
  counter-increment: rowsCount; // 3
  content:counter( rowsCount ); // 4
  color: #fff; // 5
  background: #2980B9; // 6
  display: inline-block; // 7
  text-align: center; // 8
  line-height: 40px; // 9
  width: 40px; // 10
  height: 40px; // 11
}

Помогите детально его понять.

Я его вот как читаю:
1) создать счетчик rowsCount;
2) отменить маркеры;
3) увеличиваем значение rowsCount на один;
4) присваиваем увеличенное значение;
5) задаем цвет того, что отображает свойство content;
6) задаем цвет фона;
7) это я не понимаю, но был бы рад узнать;
8) центрируем значение свойства контент;
9) это я тоже до конца не понял, кажется, что это задает длину самого блока, то есть не дает растянуться фону дальше;
10) ширина;
11) высота.

Поправьте, где не ошибся, и объясните, где не знаю.

css css3
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

По поводу counter - это сюда: http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

Я сам почти не понимаю, но в примере вроде ясно описано: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_gen_counter-reset

rowsCount - походу, типа переменная, пример использования: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_counter

ol{
  counter-reset: rowsCount; 
/* сброс счетчика, для того что бы в других элементах не было цифр всяких и счетчик считал заново когда встречает этот элемент(...гипотеза) */
}

li{
  list-style: none; 
/* что бы у li не было мало управляемых маркеров стандартных */
}

li:before {
  counter-increment: rowsCount; 
/* устанавливаем переменную и увеличиваем счетчик на единицу, каждый раз когда Элемент будет встречаться на странице. В нашем случае до следующего элемента ol где мы эту переменную сбрасываем. то есть у каждого элемента ol будет своя нумерация с блекджеком и кавайными школьницами. */

  content:counter( rowsCount );
/* тип содержимого инкриментируемые циферки(rowsCount++) */

  color: #fff; 
/* белого цвета */

  background: #2980B9;
/* на вот таком фоне */

  display: inline-block;
/* тип контейнера блок с поведением inline(можно родителю задать например text-align: center; и *дети* выровняются по центру, как будто это текст.) */

  text-align: center;
/* внутри этого контейнера элементы с display: inline и inline-block будут выровнены по центру. НЕ сам контейнер, а текст который у него внутри будет выровнен по центру. */

line-height: 40px;
/* высота текстовой строки 40px(влияет на расстояние между строк) */

  width: 40px;
/* ширина 40px */

  height: 40px;
/* высота 40px */
}