Css первый элемент класса

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

Основные виды селекторов

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name="value"] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

Селекторы можно комбинировать, записывая последовательно, без пробела:

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    9.0+1.0+9.6+3.1+3.6+2.1+2.0+

    Краткая информация

    Значение по умолчаниюНет
    ПрименяетсяКо всем элементам
    Ссылка на спецификациюhttp://www.w3.org/TR/css3-selectors/#nth-child-pseudo

    Версии CSS

    CSS 1CSS 2CSS 2.1CSS 3

    Описание

    Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

    Синтаксис

    Значения

    Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

    За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

    Табл. 1. Результат для различных значений псевдокласса

    ЗначениеНомера элементовОписание
    11Первый элемент, является синонимом псевдокласса :first-child .
    55Пятый элемент.
    2n2, 4, 6, 8, 10Все четные элементы, аналог значения even .
    2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd .
    3n+22, 5, 8, 11, 14
    -n+33, 2, 1
    5n-23, 8, 13, 18, 23
    even2, 4, 6, 8, 10Все четные элементы.
    odd1, 3, 5, 7, 9Все нечетные элементы.

    HTML5 CSS3 IE Cr Op Sa Fx

    В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).

    Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

    Добрый день, подскажите пожалуйста, как выбрать первый элемент с классом homebox-row-1


    Пробовал

    не помогло, также пробовал nth-of-type(1) также не получилось

    • Вопрос задан 30 янв. 2019
    • 2033 просмотра

    Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.

    Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).

    Поэтому простейший JS вам в помощь:

    Update: посмотрите комментарии, там решение на строчку кода меньше.

    Оцените статью
    Много толка
    Добавить комментарий