More than 1 year has passed since last update.

19.擬似クラス

HTML

Posted at 2023-02-17

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf8">
    <title>はじめてのCSS</title>
    <meta name="description" content="初めてCSSを勉強するサイトです。">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href="https://google.com" target="new">Google</p></li>
        <li><a href="https://www.yahoo.co.jp" target="new">Yahoo</p></li>
        <li><a href="https://www.apple.com" target="new">Apple</p></li>
    </ul>
    <h2>習い事ランキング</h2>
    <ol>
        <li>プログラミング</li>
        <li>水泳</li>
        <li>サッカー</li>
    </ol>
    
    <h2>学校の授業</h2>
    <ul>
        <li>国語</li>
        <li>算数</li>
        <li>理科</li>
        <li>社会</li>
    </ul>
</body>
</html>

style.css

ol li:first-child {
  color: red;
}

ul li:last-child {
  color: blue;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up