Как я и обещал в одной из предыдущих статей, я расскажу про то, как можно изменить стиль только первого элемента списка. Когда я верстал дизайн для этого блога, мне захотелось сделать меню так, чтобы элементы были отделены друг от друга. Разделение я сделал так:
Хотя это и отрывок кода, но из него понятно, что над (top) каждым элементом LI списка UL будет рисоваться сплошная (solid) линия в 1 пиксель черного (#000000) цвета. Почему я выбрал именно border-top, ведь можно было бы сделать так, чтобы отделение было снизу? Да все очень просто: я, как дизайнер, решил, что для моего дизайна у последнего элемента снизу не должно быть линии (если бы я написал border-bottom, то последний элемент был бы с чертой снизу). Таким образом, получится примерно так: Но поглядев, что получилось, мне захотелось убрать у первого элемента черту сверху. Раньше я просто переопределял стиль первого элемента помощью класса, примерно так:
А в CSS добавлял:
И все отлично работало, но появлялся лишний код в HTML и приходилось вручную его добавлять и именно в первый элемент. А если вдруг перед первым нужно будет добавить еще один элемент? Неудобно, в общем. Я нашел выход намного проще. Оказывается в CSS можно просто указать стиль для первого элемента меню:
Вот тут-то мы и определяем стиль первого элемента. Таким же образом я поступил при разработке дизайна для строительной фирмы Камелот (см. верхнее горизонтальное меню). Пользуйтесь, если не знали!
Способы смены порядка вывода элементов с помощью CSS
В этой статье мы рассмотрим несколько различных методов CSS для переупорядочения вывода элементов HTML.
Наша раскладка очень простая. В частности, на маленьких экранах (меньше 600px) она будет выглядеть так:
На средних экранах и больше (от 600px) кнопки будут выстраиваться в ряд:
Наша главная задача — поменять порядок кнопок на обратный.
Разметка
Разметка будет самая простая: просто элемент div , содержащий четыре кнопки:
Стили
На маленьком экране у всех кнопок будут одинаковые стили:
На больших экранах мы зададим width: 25% , остальные стили будут определяться методом CSS, который мы будем применять для задания обратного порядка кнопок.
Наконец, у нас будут стили для состояния focus наших кнопок:
Таким образом, если мы будем использовать для навигации клавишу Tab, наши кнопки при фокусировке станут темно-красными.
Методы упорядочивания колонок
Теперь мы готовы проверить различные подходы CSS для вывода кнопок в реверсивном порядке при превышении областью видимости ширины в 599px.
Метод №1: плавающие блоки
Можно просто добавить блокам float: right , вот полные стили:
И демо с Codepen:
Метод №2: позиционирование
Альтернативным вариантом будет задание позиции элементам, относительной или абсолютной.
По первому варианту (с относительным позиционированием) мы зададим кнопкам, плывущим влево свойство position: relative и затем расставим их с помощью свойство left .
Вторым вариантом (с использованием абсолютного позиционирования) мы зададим нашим кнопкам position: absolute , а с помощью свойства left разместим их более точно.
Демо на Codepen:
Метод №3: свойство direction
Менее очевиден подход на основе свойства direction — оно предназначено для смены направления чтения текста. В нашем случае мы задаем direction: rtl (справа налево) для элемента-обертки, что позволит сменить направление раскладки.
Примечание: для этого примера мы дадим нашим кнопкам поведение элементов таблицы, чтобы создать горизонтальную раскладку.
Вы можете видеть необходимые стили CSS ниже:
Стоит упомянуть, что если по каким-то причинам мы хотим также изменить направление текста в кнопках, мы можем включить специальное правило для того, чтобы направление символов юникода определялось свойством direction .
Демо на Codepen:
Метод №4: трансформация
Изящным решением будет оставить кнопкам float: left; и затем применить transform: scaleX(-1) к ним и их родителю. Задав отрицательные значения мы сделаем так, что трансформируемый элемент не масштабируется, а переворачивается по горизонтальной оси.
Демо на Codepen:
Мы также можем использовать для создания нужного порядка функцию трансформации rotate . Все, что нам надо добавить кнопкам и их родителю свойство transform: rotateY(180deg) .
CSS для этого решения:
Демо на Codepen:
Метод №5: флексбокс
Флексбокс это еще один способ изменения порядка колонок. В нашем примере мы используем два разных свойства флексбокса для создания нашей раскладки.
Первый подход это сделать родительский элемент кнопок флекс-контейнером и затем добавить flex-direction: row-reverse , вот так:
Демо на Codepen:
Второй вариант с флексбоксом состоит в использовании свойства order для определения порядка, в котором кнопки должны выводиться.
Демо на Codepen:
Метод №6: грид-раскладка
Многообещающим решением для расстановки элементов является раскладка на основе CSS Grid. Несмотря на крайне ограниченную поддержку в браузерах на момент написания статьи ее стоит попробовать. Учитывайте, что наш пример будет работать только в Chrome (по умолчанию эта возможность отключена, но ее легко активировать).
Не погружаясь глубоко в детали я опишу два способа с использованием CSS Grid.
Первый вариант это задание родительскому элементу кнопок свойства display: grid; и использование свойства grid-column для определения порядка вывода кнопок. В дополнение мы обеспечим попадание всех кнопок в один ряд путем прямого указания этого — grid-row: 1 .
Демо на Codepen:
Второй вариант использования CSS Grid похож на второй способ использования флексбокса. Мы зададим контейнеру свойство display: grid; , а затем используем свойство order для определения порядка вывода кнопок.
Демо на Codepen:
Напомню, что для тестирования этого метода, вам надо активировать “Experimental Web Platform features” в Chrome.
Порядок исходников и визуальный порядок
Как было показано, мы можем использовать различные подходы CSS для смены порядка наших кнопок. Попробуем пройтись по нашим демо, используя клавиатуру (кликните на пен и нажмите клавишу Tab) для навигации по кнопкам. Вы заметите, что даже, если кнопка с номером 4 выведена первой, фокус сначала появляется на кнопке с номером 1, так как она расположена первой в DOM. То же случится, если мы протестируем наши демо со скринридером (я проводил тесты с NVDA).
Учитывая эту независимость порядка CSS от порядка DOM, нам надо быть крайне осторожными с частями страниц, порядок которых мы изменяем с помощью CSS. Например, свойство флексбокса order это один из наиболее гибких способов для переупорядочения элементов, согласно спецификации:
Авторы должны использовать order только для визуального, а не логического переупорядочивания контента. Попытка использовать order для логического порядка не сработает.
То же самое спецификация говорит о свойстве order CSS Grid.
Также как и с переупорядочиванием флекс-элементов, свойство order может использоваться только, когда визуальный порядок надо рассинхронизировать с порядком зачитывания и навигации — иначе надо менять исходники документа.
Примечание: если вы используете второй способ с флексбоксом в Firefox, то вы заметите, что навигация с клавиатуры работает отлично и фокус на средних экранах появляется сначала на кнопке №4. Такое поведение является багом.
Заключение
В этой статье мы проверили различные методы CSS для переупорядочивания элементов HTML. Конечно, не все из этих методов универсальны и перед тем, как выбрать нужный вам, вы должны учесть несколько вещей:
Первый элемент списка css. Как выбрать в css первый элемент родителя. Дочерние селекторы CSS
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
×
Значения
odd Все нечётные номера элементов. even Все чётные номера элементов. Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. Задаётся в виде an±b , где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2.
Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | Первый элемент, является синонимом псевдокласса :first-child . |
| 5 | 5 | Пятый элемент. |
| 2n | 2, 4, 6, 8, 10,… | Все чётные элементы, аналог значения even . |
| 2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, аналог значения odd . |
| 3n | 3, 6, 9, 12, 15,… | Каждый третий элемент. |
| 3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная со второго. |
| n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме первых трёх. |
| -n+3 | 3, 2, 1 | Первые три элемента. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| even | 2, 4, 6, 8, 10,… | Все чётные элементы. |
| odd | 1, 3, 5, 7, 9,… | Все нечётные элементы. |
Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
Как изменить стиль CSS вложенных элементов списка?
У меня стиль стилизации <a> элементов в элементах списка в #navigation контейнере. Это работает нормально.
Теперь в некоторых <li> s я вставляю <div> s. В этом я снова использую список снова, но он должен быть другим по стилю или не иметь стиля.
Когда я добавляю <li> s, их стиль соответствует внешним <li> элементам, но это не должно.
Я пытаюсь использовать это:
но он не работает — он применяет «внешние» стили.
Это моя разметка:
Ответов: 6
Он будет продолжать применять внешние стили — это «C» в CSS, каскадный. Ваши новые стили подбираются правильно, но если я правильно читаю вопрос, вы пытаетесь устранить другие «унаследованные» стили, такие как цвет фона?
Если вы хотите, чтобы внешние стили не применялись, вам нужно либо использовать элемент, который не соответствует внешнему шаблону (т. Е. Не ли, не практичен здесь), либо переопределять стили, которые вы не хотите применяется. Если вы действительно хотите, чтобы эти стили применялись к внешнему набору элементов li, тогда рассмотрите в качестве альтернативы, используя класс CSS на внешних элементах li и применяя форматирование, которое вы не хотите унаследовать к этому классу напрямую.
Ваш css нацелен на #id newnavigation, но ваша ul #id — это навигация. Попробуйте следующее:
Чтобы выбрать внутренние элементы, просто вставьте их:
Или, чтобы соответствовать якорям:
Во внутренних стилях вы начинаете с набора стилей, унаследованного от внешних стилей, поэтому вы можете «отменить» некоторые настройки, переопределив их в соответствии с вашими потребностями.
Обратите внимание, что ваша разметка недействительна. Чтобы вставлять новые элементы, вы также должны вставлять новые списки, то есть:
Всегда полезно проверять свою разметку, когда у вас проблемы с вашим стилем, Javascript и т. Д.
Сказав это, чтобы соответствовать только внутренним LI, вам необходимо правило CSS:
Я предполагаю, что это что-то вроде этого?
Я копирую и вставляю ваши стили, и он работает нормально. Что именно это не работает?
Моя догадка была не совсем правильной. В коде, который вы показываете, нет , чтобы соответствовать селектору #newnavigation css.