2013.11.03
css

CSSのセレクタのまとめ

今さらかもしれませんが、CSSのセレクタ一覧表です。
css040
w3schools.comというサイトのこちら(英語サイト)を良く参考にしているのですが、
CSS3に関してはけっこう曖昧だった部分も多かったので理解を深めるために日本語訳してみました。

CSSセレクタ リファレンス一覧
セレクタ 使用例 使用例の説明 CSS
.class .intro class="intro"の要素に適用 1
#id #firstname id="firstname"の要素に適用 1
* * 全ての要素に適用 2
要素 p <p>要素に適用 1
要素,要素
カンマで区切って並べる
div,p <div>要素と<p>要素に適用 1
要素 要素
半角スペースで並べる
div p <div>要素の中の<p>要素に適用
(子孫要素全てに適用)
1
要素>要素 div>p <div>要素を親とした子要素である<p>要素に適用
(孫要素には適用されない)
2
要素+要素 div+p <div>要素の直後に記述された<p>要素のみに適用 2
[属性] [target] target属性のついた要素に適用 2
[属性=] [target=_blank] target="_blank"属性のついた要素に適用 2
[属性~=] [title~=flower] title属性に"flower"という文字を含む要素に適用 2
[属性|=] [lang|=en] lang属性に"en"で始まる文字を含む要素に適用 2
:link a:link クリックされていないリンクに適用 1
:visited a:visited クリックされたリンクに適用 1
:active a:active クリックした瞬間のリンクに適用 1
:hover a:hover マウスオーバーされたときのリンクに適用 1
:focus input:focus フォーカスされたinput要素に適用
(クリックして入力できるようにされたinput要素に適用)
2
:first-letter p:first-letter <p>要素の最初の1文字目だけに適用 1
:first-line p:first-line <p>要素の最初の1行目だけに適用 1
:first-child p:first-child 親要素の中の最初の子要素が<p>要素の場合その<p>要素に適用 2
:before p:before <p>要素の前にコンテンツを挿入 2
:after p:after <p>要素の後にコンテンツを挿入 2
:lang(言語) p:lang(it) lang属性が"it"(イタリア語)の<p>要素に適用 2
要素~要素 p~ul 同じ親要素で<p>要素より後に記述される全ての<ul>要素に適用 3
[属性^=] a[src^="https"] 属性の値が"https"で始まる<a>要素に適用 3
[属性$=] a[src$=".pdf"] 属性の値が".pdf"で終わる<a>要素に適用 3
[属性*=] a[src*="w3schools"] 属性の値に"w3schools"が含まれる<a>要素に適用 3
:first-of-type p:first-of-type 親要素の中の最初の<p>要素のみに適用 3
:last-of-type p:last-of-type 親要素の中の最後の<p>要素のみに適用 3
:only-of-type p:only-of-type 親要素の中に<p>要素が1つしかない場合に<p>要素に適用 3
:only-child p:only-child 親要素の中に子要素が<p>要素のみの場合に<p>要素に適用 3
:nth-child(n) p:nth-child(2) 親要素の中の2番目子要素が<p>要素だった場合のその<p>要素に適用 3
:nth-last-child(n) p:nth-last-child(2) 親要素の中の最後から2番目子要素が<p>要素だった場合のその<p>要素に適用 3
:nth-of-type(n) p:nth-of-type(2) 親要素の中の2番目の<p>要素に適用 3
:nth-last-of-type(n) p:nth-last-of-type(2) 親要素の中の最後から2番目の<p>要素に適用 3
:last-child p:last-child 親要素の中の一番最後の子要素が<p>要素だった場合のその<p>要素に適用 3
:root :root ルート要素に適用
(<html>要素に適用)
3
:empty p:empty 子要素も文字も一切含まない<p>要素に適用
(<p></p>の場合に適用)
3
:target #news:target 同じHTML内に<a href=”#news”>とid=”news”があった場合に<a href=”#news”>をクリックした際にid=”news”に適用 3
:enabled input:enabled <input>要素で入力可のものに適用 3
:disabled input:disabled <input>要素で入力不可のものに適用 3
:checked input:checked <input>要素でチェックされたものに適用
(ブラウザはオペラのみ対応)
3
:not(セレクタ) :not(p) <p>要素以外の全てに適用 3
::selection ::selection ユーザーが文字をドラッグして選択した範囲に適用 3
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP