CSS指定時のワンポイント集!

スポンサーリンク
sampleCSS
スポンサーリンク

個人的CSS指定時のポイント!

特定のclassを持った要素をセレクタとする

class=”red”というclass属性を持ったp要素だけセレクタとする場合

p.red {
  color: red;
}

二つのclass名がついた要素をセレクタとする

class=”red border”というredとborderの2つのクラス名がついた要素をセレクタとする場合

.red.border {
  color: red;
  border: 1px solid #000
}

隣接セレクタ

h3直後のpだけにCSSを適用したい場合

h3 + p {
  color: red;
}

特定の属性値をもつ要素のみを指定する

指定した値を持つ要素を指定する場合

例)<a href=”https://sample.com”>サンプル</a>

a[href="https://sample.com"] {
  color: red;
}

擬似クラス

状態に関わるもの

特定の状態になっている要素にCSSを適用します。

a:link

未訪問のリンクに対して適用します。

a:link {
  color: red;
}
a:hover

要素がカーソルに乗っている状態の時に適用します。

a:hover {
 color: red;
}
a:visited

訪問したリンクに対して適用します。

a:visited {
  color: red;
}

兄弟グループの要素を指定する

兄弟グループの要素に対し、特定の場所や並び順の要素を指定する場合。

<ul>
  <li>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</li>
  <li>メニュー4</li>
</ul>
最初の要素を指定する
li:first-child {
  color: red;
}
最後の要素を指定する
li:last-child{
  color: red;
}
2番目の要素を指定する
li:nth-child(2) {
  color: red;
}
偶数の要素を指定する
li:nth-child(even) {
  color: red;
}
奇数の要素を指定する
li:nth-child(odd) {
  color: red;
}
5の倍数番目の要素を指定する
li:nth-child(5n) {
  color: red;
}
特定のセレクタだけ指定しない
li:not(:last-child) {
  color: red;
}

擬似要素

要素の先頭や末尾にスタイルを適用します。

contentというプロパティを使い、先頭や末尾に追加したい内容を指定します。

:before

要素の先頭にスタイルを適用します。

「HelloWorld」と表示させます。

<p>World</p>

p:before {
    content: "Hello"
}
:after

要素の末尾にスタイルを適用します。

「HelloWorld」と表示させます。

<p>Hello</p>

p:after {
    content: "World"
}

コメント

タイトルとURLをコピーしました