目次
,(カンマ)
複数の要素の指定に使われます。
HTML
<h2>ピンクの文字になる</h2>
<p>ピンクの文字になる</p>CSS
h2,p,{
color:pink;
}../
一つ上のファイルに上がること
CSS
div{
background: url(../images/○○);
}※./で点が1つだと、同一ファイルになります。
>
指定した要素の直下にある要素にスタイルを適用
子要素のみに適用される
CSS
ul>li{
color: red;
}HTML
<ul>
<li>赤になる</li>
<span>
<li>変わらない</li>
</span>
<li>赤になる</li>
</ul>「ul」の子要素「li」のように、直下の子要素を示します。liの中にliがあった場合、そのliにはCSSが効きません
+
指定した要素に隣接する要素にスタイルを適用
「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用
CSS
h2 + p{
color: red;
}HTML
<h2>見出し</h2>
<p>赤になる</p>
<p>隣接していないので変化なし</p>〜
指定した要素の後にある要素全てに適用
「+」よりも適用される範囲が広い
CSS
h3 ~ p{
color: red;
}HTML
<h3>見出し</h3>
<p>赤になる</p>
<p>になる</p>=
「typeがtextのinput」のように指定できるのが属性
CSS
input[type="text"]{
margin:0;
}[ ]
「hrefがあるa」のように指定できるのが属性セレクタ
CSS
a[href]{
color: red;
}^
～から始まる
CSS
a[href^="https://"]{
color: red;
}href属性がhttps://で始まっているa
$
～で終わる
CSS
a[href$="pdf"]{
color: red;
}上記の場合は「href属性がpdfで終わるa」
＊（アスタリスク）
全てのセレクタに適応させる
CSS
*{
font-size:20px;
}△[○○○*=””]（アスタリスク）
○○○属性内の””を含んでいる△タグに指定
CSS
a[href*="map"]{
width:100%;
}href属性内にmapを含んでいるaタグに指定
！（!important）
優先度を最大
CSS
div{
color:#fff !important;
}本来優先されるスタイルがあったとしても、pが白になります。importantの上からimportantをかぶせるということは可能です。
スタイルを解除するには、initialを使います。
div{
color:#fff;
}
div{
color:initial;
}initialによって、デフォルトの設定値に戻ります。
” “(‘ ‘)
ダブルクォーテーションかシングルクォーテーション
全角値を囲う
CSS
body{
font-family: "ＭＳ Ｐゴシック", Hiragino Kaku Gothic ProN, sans-serif;
}CSS内で全角が出てきたらダブルクォーテーションで囲む
続く。
