cssのセレクタメモ

はじめに

書き方

cssのセレクタ

html

<p style="color: red;">test</p>

【要素セレクタ】

<p>node</p>

style.css
p {
	color: red;
}

pタグにstyleを当てる

【クラスセレクタ】

<p class="text-yello">node</p>

style.css
.text-yellow {
	color: yellow;
}

クラスをチェーンして設定

<p class="large text">Large Text</p>

.large.text {
    color: aqua;
    font-size: 25px;
}

要素とクラスをチェーンして設定

<p class="small text">Samall Text</p>

p.small.text {
    color: red;
    font-size: 10px;
}

【IDセレクタ】

 <p id="danger">Danger</p>

#danger {
    color: orange;
}

id セレクタは他の id セレクタと結合することはできない

【属性セレクタ】
指定された属性がタグ内にあると指定することもできる

<h4 class="example">test1</h4>
<h4>test2</h4>
<h4 class="example2">test3</h4>

h4[class] {
    color: brown;
}

属性をチェーンすることも可能

<p class="lorem">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatum, rem modi nobis velit quasi ad hic, veniam ab quos deserunt facere tempore iste ullam labore saepe, reprehenderit beatae temporibus!<a href="https://google.com" title="Link">Link</a></p>

a[href][title] {
    font-size: 30px;
}

【全称セレクタ】

<h1>Title</h1>
<h2>Sub Title</h2>
<p>Lorem</p>

* {
    color: blue;
}

【子孫セレクタ】

<h2><strong>Sub Title</strong></h2>

h2 strong{
    backgound-color: yellow;
}

【擬似クラス】
HTML要素の特定の状態や位置に基づいてスタイルを適用するための仕組みです。これらのクラスは通常、要素が特定の状態にあるときにのみ適用される

<a href="https://google.com">Google</a>

a:hover {
    color: yellow;
}

【擬似要素】
擬似要素では選択された要素の特定の箇所にレイアウトを適用することができる

<h2>Description</h2>

h2::before {
    content: "Title : ";
    color: gray;
}