任意の数の子を含めることができるコンテナー div があります。コンテナ div の直系の子孫であるすべてのリンクをターゲットにしたいのですが、.container > a
. しかし、コンテナの直接の子孫である最初のリンクに別のスタイルを適用したいと考えています。私は.container > a:first-child
このタスクを実行すると思っていましたが、そうではないようです。
using.container a:first-child
は実際には最初の 2 つの「正しくない」リンクをターゲットにすることに注意してください。
明らかに、HTML の構造を作り直すことができますが、ここに CSS ソリューションがあるかどうかを確認したいと思います。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container > a
{
background-color: plum;
}
.container > a:first-child
{
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div><a href="#">Incorrect link</a></div>
<div><div><a href="#">Incorrect link 2</a></div></div>
<p>Some text</p>
<a href="#">Category 1</a>
<a href="#">Category 2</a>
<a href="#">Category 3</a>
</div>
</body>
</html>