メディアクエリと否定形？の使い方にいて

css3そのものの使い方の疑問です
それほど詳しくないので稚拙な質問でしたらお許しください

html
1<head>
2<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3</head>
4<body>
5<header>
6...heder_contents
7</header>
8...main_contents
9</body>
10

みたいなコンテンツに対してheader要素以外にstylesheetをあてたく考えています
bootstrap4を参照したのですが,

css
1@media(min-width:576px) {
2  .d-sm-none {
3    display: none!important;
4  }
5｝

を

css
1@media(min-width:576px) {
2  .d-sm-none:not(header) {
3    display: none!important;
4  }
5｝

ｏｒ

css
1@media(min-width:576px) {
2  .d-sm-none :not(header) {
3    display: none!important;
4  }
5｝

としてみたのですが、正しくメディアクエリが動かなくなりました。
※後者は:not前のスペースが誤っていると思いますが…

ご教授お願い致します

行動規範の内容に同意します

回答1件

ベストアンサー

.d-sm-none:not(header)は、「headerでないエレメントにd-sm-noneクラスが適用されている場合」という意味になります。

上のHTMLでは、<header>に.d-sm-noneがかかっているわけではないので、他のエレメントに.d-sm-noneをかければそのまま適用されます。

投稿2019/05/07 00:06

maisumakun

総合スコア145184

ssmxgo

2019/05/07 05:46

ありがとうございます。コードに不備がありました、d-sm-noneの記述がありませんでした解釈はあっていたようです。再度確認させていただきます改めて、ありがとうございました

ssmxgo

2019/05/15 11:27

すみません回答を〆るのが遅くなりました。いつもありがとうございます

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

メディアクエリと否定形？の使い方にいて

関連した質問