CSS/Selector
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*CSS Selector
[[CSS]]|[[CSS/Sample]]
~
CSSにおけるセレクタとは、HTML文書内の制御対象を特定するも...
セレクタ {
プロパティー:値;
プロパティー:値;
}
以下様々なセレクタの書き方についてまとめています。
''付記:親要素/子要素''
階層構造をもつ文書において対象を特定する際に頻出するキー...
<div> ← 親要素
<p> ・・・ </p> ← 子要素
<p> ← 子要素
<span>・・・</span> ← 孫要素
</p>
<p> ・・・ </p> ← 子要素
</div>
~
***CONTENTS
#contents2_1
~
**基本セレクタ
***要素セレクタ(HTML要素名)
HTMLタグ名 {・・・}
HTMLタグである <h1>や<p>はそのままセレクタとなります。
~
***IDセレクタ
#ID名 {・・・}
定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけません)
命名:一般に camelCase を使います。
~
***クラスセレクタ
.クラス名 {・・・}
定義されたクラスに適用
前提:クラス名はページ内に複数
命名:一般に chain-case を使います。
~
***ユニバーサルセレクタ
* {・・・}
すべての要素に適用
CSSの先頭で余白を0リセットする場合などに使用
~
***複合セレクタ
セレクタ, セレクタ, セレクタ, ・・ {・・・}
例)h2, h3, h4 {・・・}
複数のセレクタにまとめて同一の定義を行う場合に使用
~
~
**階層セレクタ
***子セレクタ
親要素 > 子要素 {・・・}
特定の親を持つ子要素をセレクト
div > span {・・・}
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p>
<span>子要素</span> ← 選択される
<span>子要素</span> ← 選択される
</div>
~
***子孫セレクタ
親要素 子要素 {・・・}
特定の親を持つ子・孫・・・の要素をセレクト
div span {・・・}
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p> ← 選択される
<p><a href="#"><span>ひ孫要素</span></a></p> ← 選択さ...
<span>子要素</span> ← 選択される
</div>
~
***隣接セレクタ
指定要素 + 要素 {・・・}
指定要素に後続隣接する要素にのみスタイルを適用
#B + p {・・・}
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p>
<p id="C">要素</p> ← 選択される
<p id="D">要素</p>
</div>
項目をリストで [A] [B] [C] [D] と並べるとき
Aを除く他のアイテムに左マージンを設定したい・・・などに便...
li { display: inline-block;}
li + li { margin-left: 16px; }
~
***兄弟セレクタ
指定要素 ~ 要素 {・・・}
指定要素に後続する要素すべてにスタイルを適用
#B ~ p {・・・}
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p> ← 選択される
<p id="C">要素</p> ← 選択される
<span id="D">要素</span>
<p id="E">要素</p> ← 選択される
</div>
~
~
**属性セレクタ
***属性名 指定
セレクタ [ 属性名 ] {・・・}
属性を持つ要素にスタイルを適用
a[title] {・・・}
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a> ← 選択される
~
***属性名=属性値 指定
セレクタ [ 属性名 = 属性値 ] {・・・}
属性が特定の値を持つ要素にのみスタイルを適用
a[title="abc"] {・・・}
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a>
~
***付記:for 属性について
for属性はフォームパーツと要素を関連付けるために用いられる...
labelタグの書き方は2種類あって、1つはlabelタグで挟む方法...
-labelタグで挟む書き方
<label><input type="text" name="name">名前:</label>
-for属性を使う書き方
<label for="text_id">名前:</label>
<input type="text" name="name" id="text_id">
フォーム部品の id を label タグの for 属性に割り当てます。
以下の例では、label要素に for属性をつけることで、同じ内容...
<form action="http://www.google.com/search" method="get">
<label for="key">Google: </label>
<input id="key" type="search" name="q">
<input type="submit">
</form>
~
~
**擬似要素
CSS3 以降、擬似要素は ::before のようにコロンを2つ、擬似...
&small(以下の説明で、[ E ] はelememt つまり「要素名」を意...
***before 擬似要素
E::before {・・・}
要素直前の内容を定義。contentプロパティと組合せて使用しま...
例) li::before {
content: "▼";
}
~
***after 擬似要素
E::after {・・・}
要素直後の内容を定義。contentプロパティと組合せて使用しま...
例) li::after {
content: "▼";
}
~
***first-letter 擬似要素
E::first-letter {・・・}
最初に現れる1文字にだけ適用
p:first-letter {・・・} 段落の最初の1文字にのみ適用
~
***first-line 擬似要素
E::first-line {・・・}
最初の行にだけ適用
~
~
**擬似クラス
擬似クラスは従来どおりコロン [ : ]は1つです。
~
***link, visited, hover, active 擬似クラス
E:link {・・・} リンクのデフォルトの状態
E:visited {・・・} 訪問済みリンクの状態
E:hover {・・・} マウスホバリング時の状態
E:active {・・・} リンクがアクティベートされた時の状態
主として A タグの要素のデザインに使います。
擬似クラスの記述順序には「常に最後の指定で上書きされる」...
hover が効かない、訪問済みのリンクの色が変わらない、と...
~
***focus 擬似クラス
E:focus {・・・}
フォーカスが入った時の状態
主としてform関連のエレメントにフォーカスが入った場合に使...
~
***target 擬似クラス
E:target {・・・}
ターゲットとなるアンカーリンク先の要素を表します。
例えば、デフォルトではコメント欄が非表示で、クリックで表...
-HTML
<a href="#comment">コメントを表示</a>
<article id="comment">
<h3>Comments</h3>
<p>・・・・・・・</p>
<a href="#">コメントを隠す</a>
</article>
-CSS
#comment:not(:target) {
display: none;
}
#comment:target {
display: block;
}
~
***first-child 擬似クラス
E:first-child {・・・}
最初に現れる要素にのみ適用。以下は、最初の p 要素にのみ適用
p:first-child {・・・}
~
***last-child 擬似クラス
E:last-child {・・・}
最後に現れる要素にのみ適用。以下は、最後の li 要素にのみ...
li:last-child {・・・}
~
***nth-child 擬似クラス
E:nth-child(n) {・・・}
指定要素の親要素内のn番目の子要素にスタイルを適用する際に...
nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を...
以下の例では「指定されたpタグの親要素内の2番目の子要素」...
p:nth-child(2) { color: red;}
-----------------------------
<section>
<h1>"A"</h1>
<p> "abc"</p> ← 赤
<p> "def"</p>
</section>
~
***nth-last-child 擬似クラス
E:nth-last-child(n) {・・・}
指定要素の親要素内で後ろからn番目の子要素にスタイルを適用...
~
***first-of-type 擬似クラス
E:first-of-type {・・・}
最初のその種類の要素にスタイルを適用する際に使用します。
~
***last-of-type 擬似クラス
E:last-of-type {・・・}
最後のその種類の要素にスタイルを適用する際に使用します。
~
***nth-of-type 擬似クラス
E:nth-of-type(n) {・・・}
n番目に現れる要素にのみ適用
nの部分にodd と書くと奇数番目のみ、evenと書くと偶数番目...
以下の例では「指定されたpタグで、その親要素内のpタグ内で2...
p:nth-of-type(2) { color: red;}
-----------------------------
<section>
<h1>"A"</h1>
<p> "abc"</p>
<p> "def"</p> ← 赤
</section>
~
***nth-last-of-type 擬似クラス
E:nth-last-of-type(n) {・・・}
後ろから数えてn番目に現れる当該要素にスタイルを適用
~
***checked 擬似クラス
E:checked {・・・}
ラジオボタンやチェックボックスなど、チェックされた要素に...
以下の例では、チェクされた方の label の文字(選択肢1また...
--CSS
input[type=radio]:checked + label {
color: red;
}
補足:[+ label ] という記述は、それに隣接する label 要素...
--HTML
<form>
<input type="radio" name="btn">
<label>選択肢1</label>
<input type="radio" name="btn">
<label>選択肢2</label>
</form>
~
***empty 疑似クラス
E:empty {・・・}
要素内がテキストや空白などを含め空の場合に適用されるセレ...
~
***否定擬似クラス
E:not {・・・}
指定したセレクタに該当しない場合にスタイルが適用。例外を...
img:not(.abc) {・・・} img要素のうち abcクラス以外に適用
li:not(:last-child){・・・} li要素のうち最後の要素以外...
p:not(.sampleText) {・・・} p要素のうち.sampleText以外...
~
***root 擬似クラス
:root {・・・}
文書のルートとなる要素(html)にスタイルを適用する際に使...
~
~
~
終了行:
*CSS Selector
[[CSS]]|[[CSS/Sample]]
~
CSSにおけるセレクタとは、HTML文書内の制御対象を特定するも...
セレクタ {
プロパティー:値;
プロパティー:値;
}
以下様々なセレクタの書き方についてまとめています。
''付記:親要素/子要素''
階層構造をもつ文書において対象を特定する際に頻出するキー...
<div> ← 親要素
<p> ・・・ </p> ← 子要素
<p> ← 子要素
<span>・・・</span> ← 孫要素
</p>
<p> ・・・ </p> ← 子要素
</div>
~
***CONTENTS
#contents2_1
~
**基本セレクタ
***要素セレクタ(HTML要素名)
HTMLタグ名 {・・・}
HTMLタグである <h1>や<p>はそのままセレクタとなります。
~
***IDセレクタ
#ID名 {・・・}
定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけません)
命名:一般に camelCase を使います。
~
***クラスセレクタ
.クラス名 {・・・}
定義されたクラスに適用
前提:クラス名はページ内に複数
命名:一般に chain-case を使います。
~
***ユニバーサルセレクタ
* {・・・}
すべての要素に適用
CSSの先頭で余白を0リセットする場合などに使用
~
***複合セレクタ
セレクタ, セレクタ, セレクタ, ・・ {・・・}
例)h2, h3, h4 {・・・}
複数のセレクタにまとめて同一の定義を行う場合に使用
~
~
**階層セレクタ
***子セレクタ
親要素 > 子要素 {・・・}
特定の親を持つ子要素をセレクト
div > span {・・・}
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p>
<span>子要素</span> ← 選択される
<span>子要素</span> ← 選択される
</div>
~
***子孫セレクタ
親要素 子要素 {・・・}
特定の親を持つ子・孫・・・の要素をセレクト
div span {・・・}
---------------------
<div>
<span>子要素</span> ← 選択される
<p><span>孫要素</span></p> ← 選択される
<p><a href="#"><span>ひ孫要素</span></a></p> ← 選択さ...
<span>子要素</span> ← 選択される
</div>
~
***隣接セレクタ
指定要素 + 要素 {・・・}
指定要素に後続隣接する要素にのみスタイルを適用
#B + p {・・・}
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p>
<p id="C">要素</p> ← 選択される
<p id="D">要素</p>
</div>
項目をリストで [A] [B] [C] [D] と並べるとき
Aを除く他のアイテムに左マージンを設定したい・・・などに便...
li { display: inline-block;}
li + li { margin-left: 16px; }
~
***兄弟セレクタ
指定要素 ~ 要素 {・・・}
指定要素に後続する要素すべてにスタイルを適用
#B ~ p {・・・}
---------------------
<div>
<p id="A">要素</p>
<p id="B">要素</p> ← 選択される
<p id="C">要素</p> ← 選択される
<span id="D">要素</span>
<p id="E">要素</p> ← 選択される
</div>
~
~
**属性セレクタ
***属性名 指定
セレクタ [ 属性名 ] {・・・}
属性を持つ要素にスタイルを適用
a[title] {・・・}
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a> ← 選択される
~
***属性名=属性値 指定
セレクタ [ 属性名 = 属性値 ] {・・・}
属性が特定の値を持つ要素にのみスタイルを適用
a[title="abc"] {・・・}
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a>
~
***付記:for 属性について
for属性はフォームパーツと要素を関連付けるために用いられる...
labelタグの書き方は2種類あって、1つはlabelタグで挟む方法...
-labelタグで挟む書き方
<label><input type="text" name="name">名前:</label>
-for属性を使う書き方
<label for="text_id">名前:</label>
<input type="text" name="name" id="text_id">
フォーム部品の id を label タグの for 属性に割り当てます。
以下の例では、label要素に for属性をつけることで、同じ内容...
<form action="http://www.google.com/search" method="get">
<label for="key">Google: </label>
<input id="key" type="search" name="q">
<input type="submit">
</form>
~
~
**擬似要素
CSS3 以降、擬似要素は ::before のようにコロンを2つ、擬似...
&small(以下の説明で、[ E ] はelememt つまり「要素名」を意...
***before 擬似要素
E::before {・・・}
要素直前の内容を定義。contentプロパティと組合せて使用しま...
例) li::before {
content: "▼";
}
~
***after 擬似要素
E::after {・・・}
要素直後の内容を定義。contentプロパティと組合せて使用しま...
例) li::after {
content: "▼";
}
~
***first-letter 擬似要素
E::first-letter {・・・}
最初に現れる1文字にだけ適用
p:first-letter {・・・} 段落の最初の1文字にのみ適用
~
***first-line 擬似要素
E::first-line {・・・}
最初の行にだけ適用
~
~
**擬似クラス
擬似クラスは従来どおりコロン [ : ]は1つです。
~
***link, visited, hover, active 擬似クラス
E:link {・・・} リンクのデフォルトの状態
E:visited {・・・} 訪問済みリンクの状態
E:hover {・・・} マウスホバリング時の状態
E:active {・・・} リンクがアクティベートされた時の状態
主として A タグの要素のデザインに使います。
擬似クラスの記述順序には「常に最後の指定で上書きされる」...
hover が効かない、訪問済みのリンクの色が変わらない、と...
~
***focus 擬似クラス
E:focus {・・・}
フォーカスが入った時の状態
主としてform関連のエレメントにフォーカスが入った場合に使...
~
***target 擬似クラス
E:target {・・・}
ターゲットとなるアンカーリンク先の要素を表します。
例えば、デフォルトではコメント欄が非表示で、クリックで表...
-HTML
<a href="#comment">コメントを表示</a>
<article id="comment">
<h3>Comments</h3>
<p>・・・・・・・</p>
<a href="#">コメントを隠す</a>
</article>
-CSS
#comment:not(:target) {
display: none;
}
#comment:target {
display: block;
}
~
***first-child 擬似クラス
E:first-child {・・・}
最初に現れる要素にのみ適用。以下は、最初の p 要素にのみ適用
p:first-child {・・・}
~
***last-child 擬似クラス
E:last-child {・・・}
最後に現れる要素にのみ適用。以下は、最後の li 要素にのみ...
li:last-child {・・・}
~
***nth-child 擬似クラス
E:nth-child(n) {・・・}
指定要素の親要素内のn番目の子要素にスタイルを適用する際に...
nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を...
以下の例では「指定されたpタグの親要素内の2番目の子要素」...
p:nth-child(2) { color: red;}
-----------------------------
<section>
<h1>"A"</h1>
<p> "abc"</p> ← 赤
<p> "def"</p>
</section>
~
***nth-last-child 擬似クラス
E:nth-last-child(n) {・・・}
指定要素の親要素内で後ろからn番目の子要素にスタイルを適用...
~
***first-of-type 擬似クラス
E:first-of-type {・・・}
最初のその種類の要素にスタイルを適用する際に使用します。
~
***last-of-type 擬似クラス
E:last-of-type {・・・}
最後のその種類の要素にスタイルを適用する際に使用します。
~
***nth-of-type 擬似クラス
E:nth-of-type(n) {・・・}
n番目に現れる要素にのみ適用
nの部分にodd と書くと奇数番目のみ、evenと書くと偶数番目...
以下の例では「指定されたpタグで、その親要素内のpタグ内で2...
p:nth-of-type(2) { color: red;}
-----------------------------
<section>
<h1>"A"</h1>
<p> "abc"</p>
<p> "def"</p> ← 赤
</section>
~
***nth-last-of-type 擬似クラス
E:nth-last-of-type(n) {・・・}
後ろから数えてn番目に現れる当該要素にスタイルを適用
~
***checked 擬似クラス
E:checked {・・・}
ラジオボタンやチェックボックスなど、チェックされた要素に...
以下の例では、チェクされた方の label の文字(選択肢1また...
--CSS
input[type=radio]:checked + label {
color: red;
}
補足:[+ label ] という記述は、それに隣接する label 要素...
--HTML
<form>
<input type="radio" name="btn">
<label>選択肢1</label>
<input type="radio" name="btn">
<label>選択肢2</label>
</form>
~
***empty 疑似クラス
E:empty {・・・}
要素内がテキストや空白などを含め空の場合に適用されるセレ...
~
***否定擬似クラス
E:not {・・・}
指定したセレクタに該当しない場合にスタイルが適用。例外を...
img:not(.abc) {・・・} img要素のうち abcクラス以外に適用
li:not(:last-child){・・・} li要素のうち最後の要素以外...
p:not(.sampleText) {・・・} p要素のうち.sampleText以外...
~
***root 擬似クラス
:root {・・・}
文書のルートとなる要素(html)にスタイルを適用する際に使...
~
~
~
ページ名: