Web・デザイン

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

属性セレクタ

CSS

全ての a要素に適用 “#” で始まる内部リンク URL のどこかに “example” が含まれるリンク URL のどこかに “insensitive” が含まれるリンクで、 大文字小文字は区別しない “.org” で終わるリンク 参考:サンプルHTMLの <li>フロートして横並びにする。

HTMLソース

結果

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

CSS

HTML

結果

時間割

午前の授業

体育 国語 算数

給食

午後の授業

理科 社会
ターゲット疑似クラス

CSS

HTML

結果

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

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

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

確認内容

  1. 第1段落にジャンプ!
  2. 第2段落にジャンプ!
  3. このリンクは対象がないので、 どこにも行きません。
UI要素状態擬似クラス (E:enabled, E:disabled)
CSS3で定義された、UI要素状態擬似クラスのパターンE:enabled, E:disabledは、 有効または無効にしている時にスタイルが適用されるセレクタ

CSS

/* : disabled疑似クラス */

HTML

結果



構造擬似クラス
すべての要素をカウント 同じ要素のみをカウント
:first-child
兄弟要素のグループの中で最初の要素
:first-of-type
兄弟要素のグループの中で
その種類の最初の要素
:last-child
兄弟要素のグループの中で最後の要素
:last-of-type
:nth-child
:nth-of-type
:nth-last-child
:nth-last-of-type
:only-child
:only-of-type
同じ型の兄弟要素がない要素を表します。
構造疑似クラス サンプル1

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!
構造疑似クラス サンプル2

CSS

結果

【北海道】1

  • 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:沖縄県

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    CentoOS7 python3 CGI Mysqlデータベースを扱う
  2. 趣味・実用

    Mac トラックパッド 3本指 ドラッグ
  3. プログラミング

    郵便番号データベース MySQL ビュー View
  4. プログラミング

    python Anacondaを利用した開発環境の整備 jupter Noteb…
  5. サーバー環境

    Aws EC2 Postfix + Dovecotメールサーバー 構築記録
PAGE TOP