個人的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"
}
コメント