CSS セレクタ
目次
一覧
| セレクタ名 | 書式 | 意味 | 例 |
|---|---|---|---|
| タイプセレクタ | 要素名 | 指定要素 | div { ～ } |
| 全称セレクタ | * | 全要素 | * { ～ } |
| クラスセレクタ | .クラス名 | 指定クラス | .A { ～ } |
| IDセレクタ | #ID名 | 指定ID | #A { ～ } |
| 複数セレクタ | A, B | A OR B | A, B { ～ } |
| 子孫セレクタ | A B | Aの下位階層の中のB | A B { ～ } |
| 子セレクタ | A > B | Aの1つ下位階層の中のB | A > B { ～ } |
| 兄弟(隣接)セレクタ | A + B | Aの同階層、直後のB | A + B { ～ } |
| 兄弟(間接)セレクタ | A ~ B | Aの同階層、後のB | A ~ B { ～ } |
| 属性セレクタ(属性名) | [属性名] | 指定属性名 | span[class] { ～ } |
| 属性セレクタ(属性値：同値) | [A="B"] | 指定属性値 | [A="B"] { ～ } |
| 属性セレクタ(属性値：開始条件) | [A^="B"] | 属性が指定値で開始 | [A^="B"] { ～ } |
| 属性セレクタ(属性値：終了条件) | [A$="B"] | 属性が指定値で終了 | [A$="B"] { ～ } |
| 属性セレクタ(属性値：内包1) | [A*="B"] | 属性が指定値を含む | [A*="B"] { ～ } |
| 属性セレクタ(属性値：内包2) | [A~="B"] | 指定の属性を含む | [A~="B"] { ～ } |
| リンク疑似クラス | A:link | 未訪問リンク | a:link { ～ } |
| A:visited | 訪問済リンク | a:visited { ～ } | |
| ユーザーアクション疑似クラス | :hover | カーソル重ね時の要素 | a:hover { ～ } |
| :focus | 選択時の要素 | a:focus { ～ } | |
| :active | クリック時の要素 | a:active { ～ } | |
| ターゲット疑似グラス | :target | ジャンプ先要素 | #point:target { ～ } |
| 言語疑似クラス | :lang() | 指定言語の要素 | p:lang(ja) { ～ } |
| 構造疑似クラス | :first-child | 最初の要素 | li:first-child { ～ } |
| :last-child | 最後の要素 | li:last-child { ～ } | |
| :nth-child() | (前から数えて)指定番目の要素 | li:nth-child(odd) { ～ } | |
| :nth-last-child() | (後ろから数えて)指定番目の要素 | li:nth-last-child(1) { ～ } | |
| 疑似要素 | :first-line | 要素の最初の行 | p:first-line { ～ } |
| :first-letter | 要素の最初の文字 | p:first-letter { ～ } | |
| :before | 指定要素の直前にcontent属性値を挿入 | p:before { content: ～ } | |
| :after | 指定要素の直後にcontent属性値を挿入 | p:after { content: ～ } |
タイプセレクタ
h1 {
～
}
全称セレクタ
* {
～
}
クラスセレクタ
.myClass {
～
}
IDセレクタ
#myId {
～
}
複数セレクタ
h1, h2 {
～
}
子孫セレクタ
h1 h2 {
～
}
子セレクタ
h1 > h2 {
～
}
隣接要素(直後の同階層要素)
h1 + h2 {
～
}
<div>
<span id="myText1" class="myText">1</span>
<span class="myText">2</span>
<span class="myText">3</span>
</div>
<style>
#myText1 {
background-color: red;
}
#myText1 + .myText {
background-color: blue;
}
</style>
兄弟(間接)セレクタ
h1 ~ h2 {
～
}
4
<div>
<span id="myText2" class="myText">1</span>
<span class="myText">2</span>
<span class="myText">3</span>
</div>
<span class="myText">4</span>
<style>
#myText2 {
background-color: red;
}
#myText2 ~ .myText {
background-color: blue;
}
</style>
属性セレクタ
属性名
width
height
<span width="100">width</span>
<span height="100">height</span>
<style>
span[width] {
color: red;
}
</style>
属性値：同値
height=200
height=300
<span width="200">height=200</span>
<span width="300">height=300</span>
<style>
span[height="200"] {
color: red;
}
</style>
属性値：開始条件
class=abc
class=def
<span class="abc">class=abc</span>
<span class="def">class=def</span>
<style>
span[class^="a"] {
color: red;
}
</style>
属性値：終了条件
class=ghi
class=jkl
<span class="ghi">class=ghi</span>
<span class="jkl">class=jkl</span>
<style>
span[class$="i"] {
color: red;
}
</style>
属性値：内包1
class=mno
class=pqr
<span class="mno">class=mno</span>
<span class="pqr">class=pqr</span>
<style>
span[class*="n"] {
color: red;
}
</style>
属性値：内包2
class=sss ttt
class=uuu vvv
<span class="sss ttt">class=sss ttt</span>
<span class="uuu vvv">class=uuu vvv</span>
<style>
span[class~="sss"] {
color: red;
}
</style>
疑似クラス
リンク疑似クラス
<a class="test" href="#">トップへ</a><br>
<a class="test" href="#リンク疑似クラス">リンク疑似クラス</a><br>
<style>
a.test:link {
color: blue;
}
a.test:visited {
color: gray;
}
</style>
ユーザーアクション疑似クラス
<a class="user" href="#ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</a>
<style>
a.user:hover {
color: green;
}
a.user:active {
color: yellow;
}
a.user:focus {
color: pink;
}
</style>
ターゲット疑似グラス
<a href="#point">aaa</a><br>
<div id="point">point</div>
<style>
#point:target {
color: green;
}
</style>
言語疑似クラス
Office Yone
株式会社米良太事務所
<p class=”test” lang="en" xml:lang="en">Office Yone</p>
<p class=”test” lang="ja" xml:lang="ja">株式会社米良太事務所</p>
<style>
p.test:lang(en) {
color: red;
}
p.test:lang(ja) {
color: blue;
}
</style>
構造疑似クラス
- リスト1
- リスト2
- リスト3
<ul>
<li class="test1">リスト1</li>
<li class="test1">リスト2</li>
<li class="test1">リスト3</li>
</ul>
<style>
li.test1:first-child {
color: red;
}
li.test1:last-child {
color: blue;
}
</style>
- リスト1
- リスト2
- リスト3
- リスト4
<ul>
<li class="test2">リスト1</li>
<li class="test2">リスト2</li>
<li class="test2">リスト3</li>
<li class="test2">リスト4</li>
</ul>
<style>
奇数行
li.test2:nth-child(odd) {
color: red;
}
偶数行
li.test2:nth-child(even) {
color: blue;
}
</style>
疑似要素
株式会社米良太事務所
システム開発
ホームページ作成
インフラ構築
div class="test3">
<p>株式会社米良太事務所</p>
<p>システム開発</p>
<p>ホームページ作成</p>
<p>インフラ構築</p>
</div>
<style>
div.test3 p:first-line {
text-decoration: underline;
}
div.test3 p:first-letter {
font-weight: bold;
font-size: x-large;
}
div.test3 p:after {
content: '.';
}
</style>
jQuery用
<input type="text">全て
$(":text").～
$("*:text").～
$("input:text").～
複数要素の指定
AND
$(":text"+":button").～
$(":text :button").～
OR
$(":text,:button").～
