プログラミング

【プログラミング独学】HTML&CSS 9日目、特定の要素にCSSを適用

プログラミング学習(HTML&CSS)をProgateで学習した内容を記録したものです

 

Progateでの学習と自分でリサーチしてわかったことをメモしています

 

今回はProgate演習9をやりました

 

すべて指定されてしまう

下記のような記述の場合

index.html

<ul>

<li>HTML</li>

<li>PHP</li>

<li>Ruby</li>

</ul>

stylesheet.css

li {

color: red;

}

すべて赤く指定されてしまいます

・HTML

・PHP

・Ruby

 

特定の要素にCSSを適用させるには?

 

class を使って要素に名前を付けることで、それぞれの要素が識別されて違うCSSを適用できる

 

index.html

<ul>

<li class=”selected”>HTML</li>

<li>PHP</li>

<li>Ruby</li>

</ul>

 HTMLの方は <li class=”selected”>文章</li> と書く

 

stylesheet.css

.selected {

color: red;

}

CSSの方は先頭にドットをつけることを忘れない

  

タグにクラス名を適用する場合はドットをつけない

 

 

おさらい

 

index.html

<ul>

<li class=”selected”>HTML</li>

<li class=”selected”>PHP</li>

<li>Ruby</li>

</ul>

stylesheet.css

.selected {

color: red;

}

  

実際の表示

・HTML

・PHP

・Ruby

 

これで部分的にCSSを適用させることができました

 

 

まとめ 

特定の要素にCSSを適用させるには class selected を使う

CSSに記述するときは .selected ドットを先頭につける

タグに指定するときはドットはいらない

 

  

学習終わり

ブログランキングに参加中です。

応援よろしくお願いします。

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA