ホームページ制作,維持・保守
サーバーシステム構築・管理
ネットワーク構築・管理
IT環境サポート
インフラ構築サポート
ITアウトソーシング
HTMLプログラミング
ホーム > WEBプログラミング > HTML,CSS
HTML,CSS

CSSセレクタ

森之宮 0 450 0

CSS選択子HTML文書スタイルを適用する際スタイル適用される文書内の要素選択する機能があります。

 

選択子説     明バージョン
.class<style>.title {color: red;}</style>
<h2 class="title">クラス選択子</h2>
class="intro"に指定されたすべての要素選択します。 class属性にスペース分離して一つ以上スタイル指定できます。 CSS1
#id<style>#title {color: red;}</style>
<h2 id="title">クラス選択子</h2>
id="title"指定された要素選択します。 id属性は、ドキュメントで1回だけ使用されます。
CSS1
*<style> * {color: red;}</style>全ての要素選択します。 CSS2
要素
<style> p {color: red;}</style> 全ての <p> 要素選択します。 CSS1
要素,要素<style> div, p {color: red;}</style>すべての<div>要素<p>要素選択します。 選択する要素を[、]にで区分して列挙します。 要素間には従属関係はありません。
CSS1
要素 要素 <style> div p {color: red;}</style> <div> 要素内にある、すべての

>要素を選択します。>
CSS1
要素>要素 <style> div > p {color: red;}</style> 親要素が
>である全ての

CSS2
要素+要素 <style> div + p {color: red;}</style>
>要素の後ろにあるすべての

CSS2
要素1~要素2 <style> p ~ ul {color: red;}</style> 前に、

>要素すべて
CSS3
[属性] <style> [target] {color: red;}</style> target属性すべての要素を選択します。 CSS2
[属性=値] <style> [target="_blank"] {color: red;}</style> target="_blank" 属性をであるすべての要素を選択します。 大・小文字は区別しません。 CSS2
[属性~=値] <style> [title~="flower"] {color: red;}</style> title属性の値に"flower"を含むすべての要素を選択します。 大・小文字を区別しません。 CSS2
[属性|=値] <style> [lang|="en"] {color: red;}</style> "en"で始まるlangプロパティ(属性)値であるすべての要素を選択します。 属性が値と同じか値の後ろに-で繋がった異なる値がある場合に選択します。 大・小文字を区別しません。 CSS2
[属性^=値] <style> a[href^="https"] {color: red;}</style> >要素の中href属性の値が"https"で始まるすべての要素を選択します。>CSS3
[属性$=値] <style> a[href$=".pdf"] {color: red;}</style> >要素の中href属性の値が"。pdf"で終わるすべての要素を選択します。>CSS3
[属性*=値] <style> a[href*="w3c"] {color: red;}</style> >要素の中href属性の値が"w3c"を含むすべての要素を選択します。>CSS3
:active <style> a:active {color: red;}</style> active linkを選択します。 リンクをクリックした状態が選択されます。 CSS1
::after <style> p::after {content: " - 文字列追加";}</style>

>要素のコンテンツ最後に値を追加します。<>
CSS2
::before <style> p::before {content: "前に追加";}</style>

>要素のコンテンツ最後に値を追加します。<>
CSS2
:checked <style> input:checked + label {color: red;}</style> チェックされた全ての>要素その後のlabel要素を選択します。>CSS3
:disabled <style> input:disabled {color: red;}</style> すべてdisabledされた>要素を選択します。<>CSS3
:empty <style> p:empty {border: solid 1px red;}</style> 子ノード(テキストノードを含む)を持っていない全ての

>要素を選択します。>
CSS3
:enabled <style> input:enabled {color: red;}</style> すべてのdisabledされた>要素を選択します。<>CSS3
:first-child <style> p:first-child {color: red;}</style> 同じ親を持つ要素中に最初の

>要素を選択します。>
CSS2
::first-letter すべての

>要素の1文字目が選択されます。<>
CSS1
::first-line すべての

>要素のコンテンツの中で最初のラインが選択されます。>
CSS1
:first-of-type 同じ親を持つ

>要素の中で最初の

CSS3
:focus フォーカスがあるinput要素を選択します。 CSS2
:hover リンクにマウスオーバーされると、選択されます。 CSS1
:in-range input要素の値が指定された範囲内にあると選択されます。 IEはサポートしていません。 input要素のtype="number"の場合、min、max属性の値内に値がある場合、選択されます。 CSS3
:invalid 有効でない値を持つすべてのinput要素を選択します。 input要素のmin~maxの範囲、emailフィールド、numberフィールドなどの値が有効でないときに選択されます。 CSS3
:lang(language) lang属性の値が"it"であるすべての

>要素を選択します。>
CSS2
:last-child 同じ親を持つ要素の中で最後の子ノードである

>要素を選択します。>
CSS3
:last-of-type 同じ親を持つ

>要素の中で最後の

CSS3
:link 訪問したことのないリンクが選択されます。 CSS1
:not(selector) <style> :not(p) {color: red;}</style>

>要素でない場合、すべての要素を選択します。<>
CSS3
:nth-child(n) 同じ親を持つ要素の中で二番目の子ノードでありながら

>である要素を選択します。>
CSS3
:nth-last-child(n) 同じ親を持った要素の中で二番目の子ノードである

>要素を選択します。>
CSS3
:nth-last-of-type(n) <style> p:nth-last-of-type(2) {color: red;}</style> 同じ親を持った

>要素の中で二番目の

CSS3
:nth-of-type(n) 同じ親を持つ

>要素の中で二番目の

CSS3
:only-of-type 同じ親を持った要素の中で

>要素が一つだけなら選択されます。<>
CSS3
:only-child <style> p:only-child {color: red;}</style> 親要素が子要素に

>一つだけを持っている場合、p要素が選択されます。<>
CSS3
:optional "required"属性がないinput要素を選択します。 CSS3
:out-of-range 指定された範囲を外れた値を持つinput要素を選択します。 type="number"の場合 CSS3
:read-only "readonly"属性が指定されているinput要素を選択します。 CSS3
:read-write "readonly"属性が指定されていないinput要素を選択します。 CSS3
:required "required"プロパティが指定されているinput要素を選択します。 CSS3
:root ドキュメントのroot要素を選択します。 HTML文書ではhtml要素がroot要素になります。 CSS3
::selection ユーザによって選択された要素の選択された部分が選択されます。 マウスでドラッグして選択する場合です。 CSS3
:target 現在のactive#news要素が選択されます。 (anchor名を含んだURLをクリックする場合です。) CSS3
:valid 有効な値を持つすべてのinput要素を選択します。 CSS3
:visited 訪問したリンクを選択します。 CSS1


0 コメント