# CSSセレクター前セクションで作成した`part5`ディレクトリを使用します。 cssディレクトリ内に`styles.css`を作成し、`index.html`に適応させます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
  </body>
</html>

どのタグにcssを適応させるかを決める部分を**セレクター**と言いますが、セレクターはいくつか種類があります。 ## タグすでに紹介しましたが、タグを指定して適応する方法です。

p {
    color: red;
}

## id idを指定して適応する方法です。 **id(identification)属性**を付与したpタグを追加しましょう。 **id属性**は、特定のタグに固有の識別子を設定するもので、任意の文字列を設定することができます。設定された識別子は、ページ内で複数回使うことができません。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
  </body>
</html>

idを指定する場合は、先頭に`#（シャープ)`を記述します。

p {
    color: red;
}

#interesting {
    color: yellow;
}

## class こちらもすでに紹介しましたが、**class属性**を指定して適応する方法です。 **class属性**は**id属性**と違い、設定された値を複数回使うことができます。そのため、複数のタグに同じcssを当てることができます。 **class属性**を付与したpタグを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
    <p class="difficult">でもちょっと難しい</p>
  </body>
</html>

classを指定する場合は、先頭に`.`(ドット)を記述します。

p {
    color: red;
}

#interesting {
    color: yellow;
}

.difficult {
    color: blue;
}

**id属性**と**class属性**の使い分けに関して、基本的にcssを当てる際は**class属性**を使いましょう。 id属性を使うと、一箇所でしか使用できないので、一意の場所のみに適応したcssだと分かりやすい反面、cssの優先度的にidで指定した方が、class指定したものより優先され、大規模プロジェクトでは思わぬバグを生み出すことがあるため、classに統一するのが良いかと思います。 ## 属性属性を指定して適応する方法です。 aタグを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
    <p class="difficult">でもちょっと難しい</p>
    <a href="https://example.com" target="_blank">リンク</a>
  </body>
</html>

属性を指定する場合は、タグを記述後、`[](スクエアブラケット)`で、属性と値を括ります。

p {
    color: red;
}

#interesting {
    color: yellow;
}

.difficult {
    color: blue;
}

a[target="_blank"] {
  color: orange;
}

こちらは普段はあまり使わないですが、入力フォームのチェックボックス等、特定の場面で使うことがあります。