今回は覚えておきたい便利なCSS機能についてメモをしておこうと思います。
> （大なり）セレクタの意味と使い方
> は直下の要素を示すので、
section > h2 {
color: red;
}と指定すると、
section直下のh2だけに指定したスタイルが反映されます。
<section>
<h2>タイトル</h2>
<div>
<h2>２つ目のタイトル</h2>
</div>
</section>＋ (プラス)セレクタの使い方
+(プラス)は、直後の要素を指すので、
section p + p {
color: red;
}と指定すると、
<section>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
</section>となるので、
下のように一番上の行と一番下以外の行に線を引くスタイルに役立ちます。
See the Pen CSS + by JandSadaKo (@green555) on CodePen.
もう一つの方法として:not(:last-of-type)があります。
:last-of-typeは同一の階層の一番下という意味なので、:notで否定して、
一番下の行以外のdivに下線を引くということになります。
こちらの方がコードがシンプルでスマートですね。
See the Pen :not(:last-of-type) by JandSadaKo (@green555) on CodePen.
~(チルダ)の使い方
チルダは要素以降の兄弟要素を指します。
だから上と同じく一番上と下以外にボーダーを引くスタイルにするにはこうなります。
See the Pen Untitled by JandSadaKo (@green555) on CodePen.
::(疑似要素)
疑似要素と疑似クラスでコロンの数を忘れがち・・。
疑似要素はコロンが2つ。
疑似要素でよく使われるのは::beforeや::after他にも便利な疑似要素があるのでメモ。
::first-letter
最初の文字
::first-line
最初の行
:(疑似クラス)
:first-child
お馴染みのfirst-childは疑似クラスなので、コロンは1つ。hoverやlast-childやlast-of-typeなども同様に疑似クラス。
:not
便利なnotも疑似クラス。
使い方は以下の通り()カッコを使います。
:not(.cold)//クラス名:not(:last-of-tyle)使用例としてコードを載せておきます。
See the Pen Untitled by JandSadaKo (@green555) on CodePen.
CSS変数
まず、変数を作るには–(ハイフンを二つつけて）名前をつけて宣言をします。
たとえば以下のように宣言をします。
–my-color: blue;
:rootに指定すれば、html全体に適用されるので、便利だと思います。
:root { –my-color: blue;}
そして、使うには
var(–my-color);
と書きます。
たとえば、
border-bottom: 1px solid var(–my-color);
と使います。
色だけでなく、
–my-margin: 30px;
単位つきの数値も設定できて、以下のように使います。
margin-left: var(–my-margin);
変数名は大文字と小文字を区別します。
よって、宣言されていない変数を書いた場合は、カンマで区切って新たなスタイルを入力すればOKです。
color: var(–My-color, red);
以下の様に表示されます。
See the Pen css custom properties by JandSadaKo (@green555) on CodePen.