Содержание
- 2. Основные виды селекторов * – любые элементы. div – элементы с таким тегом. #id – элемент
- 3. Основные виды селекторов * – любые элементы. div – элементы с таким тегом. #id – элемент
- 4. 1. * Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы
- 5. 2. #X Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень
- 6. 3 .Х Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному
- 7. 4. Х Y CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа
- 8. 5. Х Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте
- 9. 6. X:visited and X:link Мы используем псевдо-класс :link, для выделения всех ссылок, на которые еще не
- 10. Отношения В CSS3 предусмотрено четыре вида отношений между элементами. Самые известные вы наверняка знаете: div p
- 11. 7. Х+Y Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после
- 12. 8. Х>Y Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый
- 13. 9. Х ~ Y Этот CSS-селектор очень похож на X + Y, однако, является менее строгим.
- 14. Селекторы атрибутов На атрибут целиком: [attr] – атрибут установлен, [attr="val"] – атрибут равен val. На начало
- 15. 10. X[title] В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки,
- 16. 11. X [href="Foo"] Все ссылки, которые ссылаются на everstudent.ru будут золотыми. Все остальные ссылки останутся неизменными
- 17. 12. X [HREF *= "donnu.ru"] Вот то, что нам нужно. Звезда обозначает, что искомое значение должно
- 18. 13. X[href^="http"] Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними
- 19. 14. X [href$=". JPG"] Опять же, мы используем символ регулярного выражения "$" для обозначения конца строки.
- 20. 15. X[data-*="foo"] Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений?
- 21. 16. X[foo~="bar"] А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить
- 22. 16. X[foo~="bar"] А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить
- 23. Другие псевдоклассы :not(селектор) – все, кроме подходящих под селектор. :focus – в фокусе. :hover – под
- 24. 17. X:checked Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те,
- 25. Псевдоэлементы ::before, ::after «Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ.
- 26. 18. X:after Псевдоклассы :before и :after очень крутые. Создается впечатление, что каждый день появляются новые способы
- 27. 19. X:hover Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для
- 28. 20. X:not(selector) Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того,
- 29. 21. X::псевдо элемент Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка,
- 30. Фильтр по месту среди соседей При выборе элемента можно указать его место среди соседей. Список псевдоклассов
- 31. Фильтр по месту среди соседей с тем же тегом Есть аналогичные псевдоклассы, которые учитывают не всех
- 32. 22. X:nth-child(n) Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это! Обратите внимание,
- 33. 23. X:nth-last-child(n) Что делать, если у вас огромный список элементов в ul , а нем нужно
- 34. 24. X:nth-of-type(n) Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа. Представьте себе, что
- 35. 25. X:nth-last-of-type(n) Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца. ul:nth-last-of-type(3) { border: 1px solid
- 36. 26. X:first-child Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и
- 37. 28. X:only-child Вы не часто встретите этот псевдокласс, тем не менее он существует. Он позволяет вам
- 38. 29. X:only-of-type Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В
- 40. Скачать презентацию