プログラミング

【プログラミング独学】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 ドットを先頭につける

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

 

  

学習終わり

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

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

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

人気ブログランキング

書いた人
 
33歳2児のパパ
長野の会社員です

趣味はテニス、ゲーム、漫画
アニメ、カラオケ、ネットなど

ブログ内容は育児、趣味、雑学、雑記

ブログネタなどを発信中


詳しいプロフィールはこちら


話が合いそうと思ったら
気軽にフォローお願いします



COMMENT

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

CAPTCHA