0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【フロントエンド1000本ノック】0034_否定疑似クラス:not()を使い、「特定のクラスが付いていないli要素」にのみスタイルを適用させよ。

Posted at

この記事は人間が書きました

はじめに

こんにちは、赤神です!
この記事は、「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>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?