Главная » Техника

First child css не работает

Содержание
  1. CSS first-child и last-child не работают при использовании одного и того же элемента
  2. 2 ответов
  3. Почему не срабатывает :first-child?
  4. :first-child not working as expected
  5. 5 Answers 5
  6. Not the answer you’re looking for? Browse other questions tagged css css-selectors or ask your own question.
  7. Linked
  8. Related
  9. Hot Network Questions
  10. Subscribe to RSS
  11. First child css не работает
  12. CSS-псевдоклассы
  13. Выбор первого элемента
  14. Синтаксис
  15. Типичные ошибки
  16. Учет типа элемента
  17. Выбор последнего элемента
  18. Дочерние селекторы CSS
  19. Дополнительные псевдоклассы
  20. Пример использования :first-child, :last-child и :nth-child
  21. ), то стиль p:first-child уже не будет отображаться, поскольку
  22. Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type
  23. , присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).
  24. , делая текст подчеркнутым. Данный стиль работает лишь потому, что тег
  25. является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег
  26. , стиль не будет применён.
  27. Выводы
  28. CSS Selectors

CSS first-child и last-child не работают при использовании одного и того же элемента

Я только что заметил, что CSS :first-child и :last-child не работает при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так, и если есть обходной путь к этому в CSS? Мне кажется, что ошибка CSS — первый элемент может быть также последним элементом.

Я не мог найти ничего в Google по этому вопросу. Каждый учебник предполагает, что будет по крайней мере 2 элемента.

Я ищу что-то вроде: «первый ребенок и последний ребенок» селектора. Сделать его существовать?

2 ответов

мне интересно, почему это так и есть ли обходной путь к этому в CSS? Мне кажется, что ошибка CSS — первый элемент может быть также последним элементом.

это не ошибка. Так работает каскад: если элемент является как первым, так и последним дочерним элементом, то если у вас есть :first-child и :last-child на отдельные правила, и они оба соответствуют одному и тому же элементу, тогда что-либо в более позднем объявленном или более конкретном правиле переопределит другой.

Читайте также:  Как настроить мышку hyperx pulsefire raid

вы можете найти пример такого поведения здесь С border-radius свойство shorthand и обходные пути, которые включают использование свойств компонента вместо стенографии, а также указание отдельного правила с использованием одного из следующих селекторов.

Я ищу что-то вроде: «первый ребенок и последний ребенок» селектора. Существует ли она?

буквально, Вы бы связали оба псевдо-класса, как это, что отлично работает:

однако существует специальный псевдокласс, который действует так же:

основное отличие (на самом деле,только разница) между этими двумя селекторами является специфичностью: первый более специфичен, поскольку он содержит один дополнительный псевдокласс. Нет никакой разницы даже в поддержке браузера, как :last-child и :only-child оба поддерживаются точно такими же версиями каждого браузера.

Я понимаю, что я массово опаздываю на это, но вы также можете использовать это CSS :first-of-type и :last-of-type . Например:

Источник

Почему не срабатывает :first-child?

У тебя .action_block не является первым дочерним элеменом блока .action_wrapper, поэтому :first-child не срабатывал.

Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂

У нас есть меню

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

Потом начал отменять бордеры у первого и последнего элемента

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

На утро дошло 😀

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

Источник

:first-child not working as expected

I’m trying to select the first h1 inside a div with a class called detail_container . It works if h1 is the first element within this div , but if it comes after this ul it won’t work.

I was under the impression that the CSS I have will select the first h1 no matter where it is in this div . How can I make it work?

5 Answers 5

The h1:first-child selector means

Select the first child of its parent
if and only if it’s an h1 element.

The :first-child of the container here is the ul , and as such cannot satisfy h1:first-child .

There is CSS3’s :first-of-type for your case:

But with browser compatibility woes and whatnot, you’re better off giving the first h1 a class, then targeting that class:

:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div .

The name of the pseudo-class is somewhat misleading, but it’s explained pretty clearly here in the spec.

jQuery’s :first selector gives you what you’re looking for. You can do this:

$(‘.detail_container h1:first’).css(«color», «blue»);

For that particular case you can use:

But if you need that same selector on many cases, you should have a class for those, like BoltClock said.

you can also use

By changing the number 1 by any other number you can select any other h1 item.

You could wrap your h1 tags in another div and then the first one would be the first-child . That div doesn’t even need styles. It’s just a way to segregate those children.

Not the answer you’re looking for? Browse other questions tagged css css-selectors or ask your own question.

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

First child css не работает

Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Результат данного примера показан на рис. 2.

Рис. 2. Ссылки с линией слева

CSS-псевдоклассы

Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.

Примерами псевдоклассов являются «первая строка в контейнере», «первая буква в слове», «первый дочерний элемент у родителя». Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.

Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.

Выбор первого элемента

Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.

Найдем первые элементы в двух простых HTML-структурах.

В результате выбраны будут первый пункт списка и тег, определяющий жирное начертание шрифта.

Синтаксис

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

Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса :first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

Типичные ошибки

Псевдокласс первого элемента first-child в CSS выбирает строго тег, находящийся на первом месте в родительском контейнере. Даже если элемент полностью соответствует селектору, но не является первым потомком, он не будет выбран.

Для примера возьмем предыдущий список цитат и перенесем авторов в начало.

Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.

Еще одной ошибкой является игнорирование тега
. Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.

Учет типа элемента

Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.

Теперь при подсчете учитываются только элементы, соответствующие селектору b.

Выбор последнего элемента

Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.

Потестил эту муть немного, инфу поискал. Вот что вышло…

Короче :last-of-type как и :nth-last-of-type работают исправно и аналогично-противоположно(аля словоблуд) как и :first-of-type ,просто есть одна важная особенность.

Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .

Короткое и ясное правило для использования этого псевдо класса: (путь к последнему такому дочерному тегу родителя):last-of-type

    http://jsfiddle.net/djvgaw57/
    Класс box выставлен в трех тегах

Вроде формулировку использовал правильную, делал пост и пытался понять 3 часа. Даже если что то не сказал, это можно понять по выложеным примерам.

Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе”

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам

, которые являются дочерними по отношению к , не затрагивая остальные

, дочерние по отношению к

Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов

родителя . Если символ убрать, то стиль применится абсолютно ко всем тегам

, которые находятся внутри тега , хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

Пример использования :first-child, :last-child и :nth-child

Скриншот: применение :first-child, :last-child и :nth-child

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег

,

. Разберем CSS по порядку.

Первое правило – p:first-child – касается элемента p : если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега

), то стиль p:first-child уже не будет отображаться, поскольку

перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после

любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу

, который по факту является пятым ребенком тега

с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега

, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Следующая часть этой главы – о смежных и родственных селекторах.

Почитав здесь вопрос и ответы, я понял свою ошибку. Хочу поделиться 🙂

У нас есть меню

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

Потом начал отменять бордеры у первого и последнего элемента

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

И все заработало 🙂

Полный правильный код ниже:

Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и .class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.

(Пр. #Block_Form) Этот селектор объедение элементы с В чем скажите разница между .class и #id — а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что — Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.

Выбирает, объединяет все элементы

element

(Пр. p ) Объединяет все элементы тега p.

element,element

(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:

element element

(Пр. div p) Выбирает все элементы p внутри div.

element>element

(Пр. div>p) Объединяет все p для которых родителем выступает div.

element+element

(Пр. div+p) Объединяет все p которые расположены сразу после div.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»

[attribute

=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без «<>«.

Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.

Так же их называют Псевдокласы:

(Пр. a:link) Объединяет все ссылки, которые еще не посещались

:visited

(Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить

:active

(Пр. a:active) Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

:hover

(Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль

:focus

(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем

:first-letter

(Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента

:first-line

(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются

:first-child

(Пр. p:first-child) Что бы просто объяснить — применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:

:before
:after

(Пр. p:after)
Они применяются в тех случаях, когда — нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:»»;. Также нужно помнить о том, что при добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

element1

Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.

— в этом случае ничего не произойдет, а в

а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

В этом примере результатом будут закрашенные строки item1, item3, item4.

Дальше перейдем к псевдоклассам

:first-of-type

(Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.

:last-of-type

(Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.

:only-of-type

(Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1).

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

(Пр. p:nth-child(2)) Для каждого

, который является вторым дочерним элементом у родителя.

:nth-last-child(n)

(Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего.

:nth-of-type(n)

(Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right.

:nth-last-of-type(n)

(Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего.

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

(Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря — .

:empty

(Пр. p:empty) Определяет пустые элементы — без каких-либо дочерних элементов, текста или пробелов.

:target

(Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id — #news element. Используется для URL.

:enabled

(Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным — disabled) элементам форм, простите за тавтологию.

:disabled

(Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы.

:checked

(Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же.

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Источник

Оцените статью
© 2024 Настройка и ремонт техники