<h1>CSSセレクタの基本</h1>

<p>これは要素セレクタで青色に設定されています。</p>
<p class="highlight">この段落はクラスセレクタで背景色が黄色に設定されています。</p>

<a href="#">リンク（通常）</a><br>
<a href="#">リンク（hoverで色が赤くなり、下線が追加されます）</a>

<input type="text" placeholder="フォーカスでボーダーが青色に変わります">
/* 要素セレクタの例 */
p {
  color: blue;
}

/* クラスセレクタの例 */
.highlight {
  background-color: yellow;
}

/* 擬似クラスセレクタの例 */
a:hover {
  color: red;
  text-decoration: underline;
}

input:focus {
  border-color: blue;
  outline: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.