CSS3 機能セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

萩原賢二のコーディングストック > Web・デザイン > CSS3 機能セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

2018.05.27

CSS3 機能セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

属性セレクタ

CSS

全ての a要素に適用

a {
  color: black;
  padding: 5px;
  border: solid 1px #555;
  margin: 10px;
}

a {

color: black;

padding: 5px;

border: solid 1px #555;

margin: 10px;

}

“#” で始まる内部リンク

a[href^="#"] {
  background-color: red;
}

a[href^="#"] {

background-color: red;

}

URL のどこかに “example” が含まれるリンク

a[href*="example"] {
  background-color: pink;
}

a[href*="example"] {

background-color: pink;

}

URL のどこかに “insensitive” が含まれるリンクで、大文字小文字は区別しない

a[href*="insensitive" i] {
  color: cyan;
}

a[href*="insensitive" i] {

color: cyan;

}

“.org” で終わるリンク

a[href$=".org"] {
  color: white;
}

a[href$=".org"] {

color: white;

}

参考:サンプルHTMLの <li>フロートして横並びにする。

ul li {
  float: left;
}

ul li {

float: left;

}

HTMLソース

<ul>
  <a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

<ul>

<a href="#internal">Internal link</a></li>

<li><a href="http://example.com">Example link</a></li>

<li><a href="#InSensitive">Insensitive internal link</a></li>

<li><a href="http://example.org">Example org link</a></li>

</ul>

結果

間接セレクタ

親要素が同じ兄弟関係の弟に適用されるセレクタ

CSS

p {
margin-bottom: -5px;
}
p ~ span {
 background-color: yellow;
 padding: 5px;
 border: solid 1px #555;
}

p {

margin-bottom: -5px;

}

p ~ span {

background-color: yellow;

padding: 5px;

border: solid 1px #555;

}

HTML

<p>時間割</p>
<p>午前の授業</p>
<span>体育</span>
<span>国語</span>
<span>算数</span>
<p>給食</p><p>午後の授業</p>
<span>理科</span>
<span>社会</span>

<p>午前の授業</p>

<p>給食</p><p>午後の授業</p>

結果

時間割

午前の授業

体育国語算数

給食

午後の授業

理科社会

ターゲット疑似クラス

CSS

/* 対象要素に疑似要素を追加 */
#kakka3 p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}
/* 対象要素の中の i 要素にスタイルを適用 */
p:target i {
  color: red;
  display: block;
  padding: 5px;
}
#kakka3 p:not(:target) i {
  display: none;
}

/* 対象要素に疑似要素を追加 */

#kakka3 p:target::before {

font: 70% sans-serif;

content: "►";

color: limegreen;

margin-right: .25em;

}

/* 対象要素の中の i 要素にスタイルを適用 */

p:target i {

color: red;

display: block;

padding: 5px;

}

#kakka3 p:not(:target) i {

display: none;

}

HTML

<h4>ターゲット擬似クラスの動作確認</h4>
<p id="p1">第一段落<i>「第1段落にジャンプ！」をクリックしました。</i></span>
<p id="p2">第二段落<i>「第2段落にジャンプ！」をクリックしました。</i></p>

<h4>確認内容</h4>
<ol>
 <li><a href="#p1">第1段落にジャンプ！</a></li>
 <li><a href="#p2">第2段落にジャンプ！</a></li>
 <li><a href="#nowhere">このリンクは対象がないので、
   どこにも行きません。</a></li>
</ol>

<h4>ターゲット擬似クラスの動作確認</h4>

<p id="p1">第一段落<i>「第1段落にジャンプ！」をクリックしました。</i></span>

<p id="p2">第二段落<i>「第2段落にジャンプ！」をクリックしました。</i></p>

<ol>

<li><a href="#p1">第1段落にジャンプ！</a></li>

<li><a href="#p2">第2段落にジャンプ！</a></li>

<li><a href="#nowhere">このリンクは対象がないので、

どこにも行きません。</a></li>

</ol>

結果

ターゲット擬似クラスの動作確認

第一段落「第1段落にジャンプ！」をクリックしました。

第二段落「第2段落にジャンプ！」をクリックしました。

UI要素状態擬似クラス (E:enabled, E:disabled)

CSS3で定義された、UI要素状態擬似クラスのパターンE:enabled, E:disabledは、有効または無効にしている時にスタイルが適用されるセレクタ

CSS

/* : disabled疑似クラス */

:disabled {
	background-color: green;

/* :enabled疑似クラス */
input[type=&quot;text&quot;]:enabled {
	background-color: silver;
}
/* :checked疑似クラス */
:checked + label {
	background-color: yellow;
}

:disabled {

background-color: green;

/* :enabled疑似クラス */

input[type="text"]:enabled {

background-color: silver;

}

/* :checked疑似クラス */

:checked + label {

background-color: yellow;

}

<b>補足</b>
/* --------------------------------------------------------------------------
隣接兄弟結合子 (adjacent sibling combinator, +) は2つのセレクターを接続し、
同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

 画像の直後に来る段落 
	img + p {
 		 font-style: bold;
	}

/* --------------------------------------------------------------------------

隣接兄弟結合子 (adjacent sibling combinator, +) は2つのセレクターを接続し、

同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

画像の直後に来る段落

img + p {

font-style: bold;

}

HTML

<form action="">
	<label for="text1">お名前</label>
	<input type="text" name="text1" id="text1"><br>
	<label for="text2">住　所</label>
	<input type="text" name="text2" id="text2" disabled="disabled"><br>
	<fieldset>
		<label>性　別</label>
		<input type="checkbox" name="check1" id="check1">
		<label for="check1">男</label>
		<input type="checkbox" name="check1" id="check2">
		<label for="check2">女</label>
	</fieldset>
</form>

</fieldset>

</form>

結果

構造擬似クラス

すべての要素をカウント

同じ要素のみをカウント

:first-child

兄弟要素のグループの中で最初の要素

:first-of-type

兄弟要素のグループの中で
その種類の最初の要素

:last-child

兄弟要素のグループの中で最後の要素

:last-of-type

兄弟要素のグループの中で<br>その種類の最後の要素

1	兄弟要素のグループの中で<br>その種類の最後の要素

:nth-child

兄弟要素のグループの中での位置に<br>基づいて選択

例：
/* 兄弟要素の中で3つおきに要素を選択 */
:nth-child(4n) {
  color: lime;
}

兄弟要素のグループの中での位置に<br>基づいて選択

例：

/* 兄弟要素の中で3つおきに要素を選択 */

:nth-child(4n) {

color: lime;

}

:nth-of-type

兄弟要素のグループの中で指定された型の<br>要素を、位置に基づいて選択

例：
/* 兄弟の  &lt;p&gt;  要素の中で、3つおきに選択 */
p:nth-of-type(4n) {
  color: lime;
}

兄弟要素のグループの中で指定された型の<br>要素を、位置に基づいて選択

例：

/* 兄弟の <p> 要素の中で、3つおきに選択 */

p:nth-of-type(4n) {

color: lime;

}

:nth-last-child

兄弟要素グループ内での位置に
基づいて要素を選択

1 2	兄弟要素グループ内での位置に基づいて要素を選択

:nth-last-of-type

兄弟要素のグループの中で指定された型の要素を、
最後から数えた位置に基づいて選択

1 2	兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択

:only-child

兄弟要素がない要素を表します。 
:first-child:last-child または 
:nth-child(1):nth-last-child(1) と
同じですが、詳細度はより低い

兄弟要素がない要素を表します。

:first-child:last-child または

:nth-child(1):nth-last-child(1) と

同じですが、詳細度はより低い

:only-of-type

同じ型の兄弟要素がない要素を表します。

構造疑似クラスサンプル１

<h4>関数表記</h4>
<b>&lt;An+B&gt;</b>
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 
An+B のパターンに一致する位置の要素を表します。
最初の要素の番号は 1 です。
 A と B の値は両方とも &lt;integer&gt; です。

一連の兄弟要素の中で、 n に正の整数か0が入るとき、

An+B のパターンに一致する位置の要素を表します。

最初の要素の番号は 1 です。

A と B の値は両方とも <integer> です。

`span:nth-child(2n+1)`, 同じ子要素<span>のみ

子要素 1, 3, 5, および 7 の要素が選択される

Span 1! Span 2 Span 3! Span 4 Span 5! Span 6 Span 7!

`span:nth-child(2n+1)`
子要素<span>の間に<em>子要素が混入されている

子要素<span> 1, 5, and 7 が選択されるが.
3 番目の子要素は<em>で選択されず、子要素<span>のみが対象となる。

Span! Span This is an em. Span Span! Span Span! Span

`span:nth-of-type(2n+1)`
子要素<span>の間に<em>子要素が混入されている

すべての子要素 1, 4, 6, and 8 が選択される。
3番目の子要素だけが<span>ではなく<em>ですが、それも含めてカウントされる。

Span! Span This is an em. Span! Span Span! Span Span!

構造疑似クラスサンプル２

<h4>キーワード値</h4>
<b>odd</b>
一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
<b>even</b>
一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。

<h4>キーワード値</h4>

一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。

一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。

CSS

/* 構造疑似クラス */
#kakka6 h4:nth-of-type(odd) {
	background-color: skyblue;
}
#kakka6 h4:nth-of-type(even) {
	background-color: yellow
}

/* 構造疑似クラス */

#kakka6 h4:nth-of-type(odd) {

background-color: skyblue;

}

#kakka6 h4:nth-of-type(even) {

background-color: yellow

}

結果

【北海道】１

01：北海道

【東北】

02：青森県
03：岩手県
04：宮城県
05：秋田県
06：山形県
07：福島県

【関東】

08：茨城県
09：栃木県
10：群馬県
11：埼玉県
12：千葉県
13：東京都
14：神奈川県

【中部】

15：新潟県
16：富山県
17：石川県
18：福井県
19：山梨県
20：長野県
21：岐阜県
22：静岡県
23：愛知県

【関西】

24：三重県
25：滋賀県
26：京都府
27：大阪府
28：兵庫県
29：奈良県
30：和歌山県

【中国】

31：鳥取県
32：島根県
33：岡山県
34：広島県
35：山口県

【四国】

36：徳島県
37：香川県
38：愛媛県
39：高知県

【九州・沖縄】

40：福岡県
41：佐賀県
42：長崎県
43：熊本県
44：大分県
45：宮崎県
46：鹿児島県
47：沖縄県

Webサイト https 導入備忘録

CSS3 リッチな表現角丸、影、グラデーションについて学ぶ

Webサイトデザイン、プログラミング、サーバー構築運用の記録

CSS3 機能セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

CSS

HTMLソース

結果

CSS

HTML

結果

CSS

HTML

結果

ターゲット擬似クラスの動作確認

確認内容

CSS

HTML

結果

`span:nth-child(2n+1)`, 同じ子要素<span>のみ

`span:nth-child(2n+1)`
子要素<span>の間に<em>子要素が混入されている

`span:nth-of-type(2n+1)`
子要素<span>の間に<em>子要素が混入されている

CSS

結果

【北海道】１

【東北】

【関東】

【中部】

【関西】

【中国】

【四国】

【九州・沖縄】

最近の記事

Webサイトデザイン、プログラミング、サーバー構築運用の記録

CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

CSS

HTMLソース

結果

CSS

HTML

結果

CSS

HTML

結果

ターゲット擬似クラスの動作確認

確認内容

CSS

HTML

結果

span:nth-child(2n+1), 同じ子要素<span>のみ

span:nth-child(2n+1)子要素<span>の間に<em>子要素が混入されている

span:nth-of-type(2n+1)子要素<span>の間に<em>子要素が混入されている

CSS

結果

【北海道】１

【東北】

【関東】

【中部】

【関西】

【中国】

【四国】

【九州・沖縄】

最近の記事

CSS3 機能セレクタ、target擬似クラス、構造擬似クラスについて学ぶ

`span:nth-child(2n+1)`, 同じ子要素<span>のみ

`span:nth-child(2n+1)`
子要素<span>の間に<em>子要素が混入されている

`span:nth-of-type(2n+1)`
子要素<span>の間に<em>子要素が混入されている