【初心者必見!】CSSセレクタまとめ

2019-04-20 13:35

webページのコーディングにおいて、cssの存在はとても重要です。サイトの初期構築、ともなればなおさらかと思います。

そこで、今回は様々な「CSSセレクタ」の書き方を紹介していこうと思います。是非ブックマークをして、制作のお供にしてくださいね。

階層関係でセレクタを指定する
n番目のセレクタを指定する
◯◯を含むセレクタを指定する
その他の擬似クラス

階層関係でセレクタを指定する

全ての要素

/*html内のすべての要素に適用*/
* {
box-sizing:boder-box;
}

子要素

/*bodyのなかの全ての1<p>に適用*/
body p {
font-size:16px;
}

直下の子要素

/*div直下のp.lead_textに適用*/
div > p.lead_text {
font-weight:bold;
}

隣り合った下の要素に適用

/*h2の直下の<p>に適用*/
h2 + p {
font-size:120%;
}

n番目のセレクタを指定する

以下の指定の()内は数列の式のように記述します。

最初の要素に適用

/*最初の<li>にのみ適用*/
ul li:first-child {
font-weight:bold;
}

最後の要素に適用

/*最後の<li>にのみ適用*/
ul li:last-child {
font-weight:bold;
}

順番を指定して適用

/*最初から数えて3番目の<li>にのみ適用*/
ul li:nth-of-type(3) {
font-weight:bold;
}

倍数の要素に適用

/*3の倍数の<li>にのみ適用*/
ul li:nth-of-type(3n) {
font-weight:bold;
}

n番目以降の要素に適用

/*最初から数えて3番目以降の<li>に適用*/
ul li:nth-of-type(3+n) {
font-weight:bold;
}

最初からn番目までの要素に適用

/*最初から数えて5番目までの<li>に適用*/
ul li:nth-of-type(5-n) {
font-weight:bold;
}

◯◯を含むセレクタを指定する

特定の属性を含む要素に適用

/*"onclick"属性を持つ要素に適用*/
p[onclick] {
cursor: pointer;
}

特定の属性に指定した値を含む要素に適用

/*"target"属性に"_blank"を含む要素に適用*/
a[href*="_blank"] {
cursor: pointer;
}

属性の値が指定した文字で始まる場合に適用

/*"text"から始まるclass名を持った要素に適用*/
div[class^="text"] {
font-weight:bold;
}

属性の値が指定した文字で終わる場合に適用する

/*"box"で終わるclass名を持った要素に適用*/
div[clas$="box"] {
margin:0 auto;
}

その他の擬似クラス

マウスオーバー時のスタイル

a:hover {
opacity:0.8;
}

訪問済みリンク、アクティブ時のスタイル

a:visited,a:active{
opacity:0.8;
}

チェックボックスがアクティブの時のスタイル

input[type="checkbox"]:checked {
opacity:0.8;
}

入力フォームにフォーカスした時のスタイル

input[type="text"]:focus {
background: #ffffff;
}

特定の要素以外に適応

.text_box *:not(li) {
margin:0;
}