Работа с CSS селекторами
#1 Виды селекторов
Шпаргалка по именам классов(или части имени)
- простые
- "div" или ".class-name" или "#id-name" и т.д.
Ссылка на презентацию -> 6й слайд
- составные (не разделены комбинаторами)
- .class-name.class-name2 или div.class-name
- сложные (разделены комбинаторами)
Ссылка на презентацию -> 4й слайд
- список селекторов (перечисление через ",")
#2 Вес селекторов
Вес селекторов, расширенная статья
| !important | |
| style="" | 1,0,0,0 |
| #id | 0,1,0,0 |
| .class_name | 0,0,1,0 |
| [attr=value] | 0,0,1,0 |
| li | 0,0,0,1 |
| * | 0,0,0,0 |
#3 Псевдоклассы
- "состояния"
- :hover
- :focus
- :visited
- :checked
- :disabled
- и т.д.
- "поиск"
- :first-child
- :first-of-type
- :last-child
- :nth-child()
- :not(X)
#4 Псевдоэлементы
Важное свойство content: '';
- ::before
- ::after