{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":":first-child"},{"type":"text","text":" — это псевдокласс, который выбирает "},{"type":"text","marks":[{"type":"bold"}],"text":"элемент, являющийся первым ребёнком своего родителя"},{"type":"text","text":". Он сработает только в том случае, если элемент действительно стоит "},{"type":"text","marks":[{"type":"bold"}],"text":"первым внутри контейнера"},{"type":"text","text":", среди всех соседей на одном уровне."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Пример"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Первый
Второй

\n"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"type":"text","text":"li:first-child {\n color: red;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В этом примере красным станет только первый "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":", потому что он — первый дочерний элемент внутри "},{"type":"text","marks":[{"type":"code"}],"text":"ul"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Когда :first-child НЕ сработает"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"li"},{"type":"text","text":" не первый в списке:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Пункт

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тогда "},{"type":"text","marks":[{"type":"code"}],"text":"li:first-child"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"не применится"},{"type":"text","text":", потому что первым ребёнком является "},{"type":"text","marks":[{"type":"code"}],"text":"span"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Итог"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":":first-child"},{"type":"text","text":" выбирает только те элементы, которые находятся "},{"type":"text","marks":[{"type":"bold"}],"text":"первой позицией внутри своего родителя"},{"type":"text","text":". Он зависит от структуры HTML и не смотрит на тип тега — важно только положение в дереве."}]}]}

Что делает :first-child?

Комментарии