no-image

擬似クラス

要素:root/ルート指定

htmlに対して適用させる擬似クラス。

結果

コード事例はありません。

解説

<html>に適用される擬似クラスです。
通常のCSSで<html>に適用させるものと効果は変わらないとのことです。

要素:nth-child()/一定おき

同要素が続く時、一定間隔に適用。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tbody:nth-child(even) {
background: #FFFF99;
border:1px solid #888;
}

解説

同じ要素が続く場合(<li>など)、ひとつ間隔をあけて適用することができます。

例題では、<tbody>に適用していますが、この場合、親要素である<table>から見た兄弟要素も含まれますので一行目の<thead>もカウントされます。

したがって、偶数(even)に適用しているのに、奇数行から背景が変わっているのはそのためです。

偶数行は、nth-child(even)。奇数行は、nth-child(odd)。

また、nth-child(数字)で、最初から数えたその行だけに適用できます。

要素:nth-of-type()/一定おき

兄弟要素が続く時、一定間隔に適用。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tbody:nth-of-type(even) {
background: #FFFF99;
border:1px solid #888;
}

解説

偶数行は、nth-of-type(even)。奇数行は、nth-of-type(odd)。

また、nth-of-type(数字)で、後から数えたその行だけに適用できます。

要素:nth-last-child()/後から一定おき

同要素が続く時、後から一定間隔に適用。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tbody:nth-last-child(even) {
background: #FFFF99;
border:1px solid #888;
}

解説

同じ要素が続く場合(<li>など)、最終行から、ひとつ間隔をあけて適用することができます。

例題では、<tbody>に適用していますが、この場合、親要素である<table>から見た兄弟要素も含まれますので一行目の<thead>もカウントされます。

したがって、偶数(even)に適用しているのに、奇数行から背景が変わっているのはそのためです。

偶数行は、nth-last-child(even)。奇数行は、nth-last-child(odd)。

また、nth-last-child(数字)で、後から数えたその行だけに適用できます。

要素:first-of-type/最初の同一要素

最初の要素のみ適用。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tbody:first-of-type {
background: #FFFF99;
border:1px solid #888;
}

解説

同じ要素の最初だけに適用されます。
効果は、 nth-of-type(1)と全く同じです。

要素:last-of-type/最後の同一要素

最後の要素のみ適用。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tbody:last-of-type {
background: #FFFF99;
border:1px solid #888;
}

解説

同じ要素の最後だけに適用されます。
効果は、 nth-last-of-type(1)と全く同じです。

要素:last-child/最後の要素

親要素内の最後の要素。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table tr:last-child {
background: #FFFF99;
border:1px solid #888;
}

解説

同じ親要素を持つ最初の要素に適用されます。

例題では、tableクラスの<tr>に適用したパターンです。

上の階層に<tbody>があるので、<tbody>の中にある最後の<tr>のみに適用されています。

要素:only-child/唯一の子要素

唯一の子要素。

結果

唯一の子要素

唯一の子要素

]

解説

親要素との組み合わせがページ内で唯一使われている場合のみ適用されます。同じ組み合わせが二つあっても大丈夫です。「この組み合わせはこの変化を持たせたい」と一括管理したい時に便利でな擬似クラスです。親要素の中に、他の要素が混じっていると適用されません。

要素:only-of-type/一つの子要素

親要素内の唯一の要素。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table thead:only-of-type {
background: #FFFF99;
border:1px solid #888;
}

解説

親要素のなかで唯一使われている場合のみ適用されます。

例題では、<table>内に<thead>がひとつだけ使われているので変化が見られます。

しかし、ふたつ<thead>が含まれていると適用されません。

要素:empty/子要素なし要素

空の要素。

結果

.table {
border-collapse:collapse;
}
table th {
padding:5px;
text-align:left;
vertical-align:top;
background-color:#DDD;
border:1px solid #888;
}
.table td {
padding:6px;
border:1px solid #888;
}
.table td:empty {
background: #FFFF99;
border:1px solid #888;
}

果物
いちご 甘酸っぱい
レモン 酸っぱい

解説

空の要素に適用されます。

要素:target/ターゲット先要素

ターゲット先の要素を表示。

結果

.menu {
clear:left;
height: 30px;
width: 240px;
}
.menu a {
width: 80px;
float: left;
display: block;
height: 20px;
line-height: 30px;
text-align: center;
}

div[id^=”text_”] {
width: 240px;
height: 100px;
padding: 10px;
position: absolute;
}
#text_01:target {
background-color: blue;
z-index: 2;
}
#text_02:target {
background-color: red;
z-index: 2;
}
#text_03:target {
background-color: green;
z-index: 2;
}
#text_01 {
background-color: blue;
z-index: 2;
}

解説

<a>タグの、アンカーテキストリンクと併用することで、例題のような効果を見せることができます。
Javascriptのようです。残念ながら、現時点でIEは未対応です。

要素:target/disabled属性の要素

入力可能・不可能要素に適用。

結果

要素::disabled {
background-color:red;
}
要素::enabled {
background-color:blue;
}

disabledの状態。

enabledの状態。

解説

文字通り、入力不可のinputに対して適用する擬似クラスです。

要素:enabled, 要素:disabled/disabled属性でない要素

入力可能・不可能要素に適用。

結果

要素::disabled {
background-color:red;
}
要素::enabled {
background-color:blue;
}

disabledの状態。

enabledの状態。

解説

文字通り、入力不可のinputに対して適用する擬似クラスです。

要素:checked/checked属性の要素

入力済み要素に適用。

結果

.test input::checked {
background-color:red;
}

checkedの状態。

チェック1
チェック2
チェック3

解説

チェック済みの要素に適用する擬似クラスです。

要素:not/該当しない要素

該当しない要素のスタイル削除。

結果

.item_01 li *:not(strong) {
color:red;
font-style: normal;
font-weight: normal;
}

  • テキスト
  • テキスト
  • テキスト
  • テキスト

解説

全ての要素に適用したCSSで、適用を解除したい要素を指定する場合に使用します。

例題では、「.item_01」クラス内にある<li>の全ての要素(*)に適用するが、<strong>は無視する。という命令です。

ちなみに、2つ以上無視したい場合は「要素::not(strong):not(em)」というふうに書きます。