この記事は人間が書きました
はじめに
こんにちは、赤神です!
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
否定擬似クラスとは?
否定擬似クラスの :not() は、その名の通り「〜ではない」要素を選択するための、便利な擬似クラスです。「除外」や「否定」の条件を指定できます。
例えば、p:not(.highlight) は、「.highlight クラスが付いていない、全ての <p> 要素」を選択します。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0034</title>
<style>
li:not(.special) {
text-decoration: underline;
}
</style>
</head>
<body>
<main>
<h1>否定擬似クラス</h1>
<ul>
<li>アイテム 1</li>
<li>アイテム 2</li>
<li class="special">アイテム 3 (special)</li>
<li>アイテム 4</li>
</ul>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>