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 {
 ~
}

123

<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 {
 ~
}

123

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>

ターゲット疑似グラス

aaa

point

<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").~