型 | 意味 | 使用例 | 説明 | 最初に定義されたCSSの水準 |
---|---|---|---|---|
* | すべての要素 | *.abc | class="abc"であるすべての要素 | 2 |
E | E要素 | 以下 E や F はh1,h2,p,spanなどの要素のどれかを表す | 1 | |
E.warning | クラスが"warning"であるEという要素(その文書言語はクラスが決定される方法を明示する)。 | p.abc | class="abc"であるp要素 | 1 |
E#myid | IDが"myid"と等しいEという要素。 | h2#abc | id="abc"であるh2要素 | 1 |
E F | Eという要素の子孫であるFという要素 <E><F>子</F></E> <E><G>子<F>孫</F></G></E> |
div p | div要素の中にあるp要素。子でも孫でもよい。 | 1 |
E > F | Eという要素の子であるFという要素 <E><F>子</F></E> |
div > p | div要素の中にあるp要素。孫ではだめ。 | 2 |
E + F | Eという要素の直後に来るFという要素 <E></E><F>直後</F> |
h2 + p | h2要素の直後にくるp要素。(その次のp要素は入らない) | 2 |
E ~ F | Eという要素の後に来るFという要素 <E></E><G></G><F>後</F> |
h3.chu ~ p | class="chu" というクラス属性を持ったh3要素の後にくるp要素すべて。 | 3 |
E[foo] | "foo"という属性があるEという要素 <E foo="xyz"> |
td[colspan] | colspan属性が設定されているtd要素。(属性の値は何でもよい) | 2 |
E[foo="bar"] | "foo"という属性の値が厳密に"bar"と等しいEという要素 <E foo="bar"> |
td[colspan="3"] | colspan属性が設定されその値が3であるtd要素。 | 2 |
E[foo~="bar"] | "foo"という属性の値がスペースで区切られた値のリストであり、そのひとつが厳密に"bar"と等しいEという要素 <E foo="xyz bar"> |
p[class~="abc"] | class属性にabcが入っているp要素。p.abc と同じ(.は省略形) | 2 |
E[foo|="en"] | 値が厳密に"en"であるか、"-"の直前に来る"en"で始まっているかのいずれかであるfooという属性をもつE要素 | link[hreflang|="en"] | "en"、"en-US"、"en-cockney"など、hreflangという属性の値が"en"または"en-"から始まるlink要素 | 2 |
E[foo^="bar"] | "foo"という属性の値が厳密に文字列"bar"から始まるEという要素 | p[title^="pre"] | title属性がpreで始まるp要素 | 3 |
E[foo$="bar"] | "foo"という属性の値が厳密に文字列"bar"で終わるEという要素 | p[title$="ism"] | title属性がismで終わるp要素 | 3 |
E:link E:visited |
ターゲットがまだ訪れていない(:link)か、あるいはすでに訪れている(:visited)ハイパーリンク元のアンカーであるEという要素 | a:link a:visited | まだ訪れていないa 最近訪れたa |
1 |
E:hover E:active E:focus |
使用者がある行為をしている間のEという要素 | td:hover{background:blue} td:active{background:red} a:focus{background:green} | マウスが上に来ると青 マウスボタンを押すと赤 tabキーでfocusすると緑 |
1および2 |
E:lang(c) | Eの言語がcであるもの | span:lang(fr) {color:red} | 言語がフランス語のspan要素 déjà-vu | 2 |
E:first-child | その親の最初の子であるEという要素 | span:first-child {background:green} | 最初のspan要素 | 2 |
E:last-child | その親の最後の子であるEという要素 | span:last-child {background:green} | 最後のspan要素 | 3 |
E:nth-child(n) | その親のn番目の子であるEという要素 | span:nth-child(2n) {background:green} | 偶数番目のspan要素 | 3 |
E:first-line | Eという要素の最初にフォーマットされる行 | td:first-line {color:brown} | td要素の内容のうち最初の行になる部分。 | 1 |
E:first-letter | Eという要素の最初にフォーマットされる文字 | td:first-letter {background:red} | td要素の内容のうち最初の文字になる部分。 | 1 |
E:before | Eという要素の前に生成される内容 | td:before {content:"★"} | td要素の内容の前に加える | 2 |
E:after | Eという要素の後に生成される内容 | td:after {content:"★"} | td要素の内容の後に加える | 2 |
いままでに勉強していないセレクタを試すページを作る
時間があればsel2.html, sel3.htmlと作っていってもよい。
index.htmlからはセレクタ、セレクタ2などのリンクから行けるようにすること。
E + F E という要素の直後に来る F という要素
E[foo] "foo"という属性の E という要素
E[foo~="bar"] "foo"という属性に"bar"という値が入っている