Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@kibinag0

CSSの複数のセレクター選択の話

CSSで複数クラスを指定してスタイルを適用する

HTMLで例えば "class1" と "class2" というクラスがあって、そのどちらにも同じスタイルを適用したい場合ってありますよね。(まぁ同じクラスにまとめちゃえばいいんじゃんって時もあるんですけど、それは置いといて笑)

そんな時は、CSSで複数のクラスを指定しましょう。

CSSで複数のクラスを選択

例えば、h1とpに同じスタイルを適用したい時。

2つのクラスの間にあるのは、、、"カンマ"です!!

stylesheet.css

h1, p{
   color: red;
}

CSSで親要素の中の子クラスを選択

例えば、上で既にh1には "color: red;" が適用されていますよね。
でも、class = "bottom-container" のdivの中のh1だけは、h1を白にしたい!そんな時はどうするか。

2つのクラスの間にあるのは、、、"スペース"です!!
(※親要素と子要素の関係でのみ成立するため注意。)

stylesheet.css

h1, p{
   color: red;
}

.bottom-container h1{
   color: white;
}


ある1つのHTMLタグで複数CSSクラスを持つ要素を選択

これは複数のクラスを持つタグのみに特定のスタイルを適用する時。

例えば、class1で文字色RED、class2で文字色BLUEになっているけど、

のように両クラスを持つタグだけは違うスタイルを適用したい。って時はこれを使います。

2つのクラスの間にあるのは、、、"無"です!!
何もなく、そのまま2つ目のクラスを指定します。

stylesheet.css

.class1.class2{
   color: green;
}


Codeplyでやってみると、こんな感じ。

スクリーンショット 2019-12-25 11.54.14.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What is going on with this article?