はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ CSSの基礎知識が増える
・ CSS擬似クラス :not()について
以下参考
CSS の :not() の使いかた
[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点
CSS :not()とは
CSSの否定擬似クラスで、指定した要素以外にスタイルを適用する
例
コンテンツを画像の様な並びにしたくて、FlexBoxで並び順を変えようと試みましたが調整できずcontainer-profile-right.responsiveというクラスを新しく作って、普段はdisplay: none;で
隠してスマホサイトで表示するイメージです
index.haml
.container-profile#ABOUT.container-profile__right.responsive← スマホで表示
%p.top About Me
.header-line.container-profile__left.container-profile__right← :not(.responsive)を当てて
%p.top About Me ← ここと
.header-line← ここを隠す
%p hoge
%p.bottom 199X年生まれ 世紀末生まれ
index.scss
@mediascreenand(max-width:768px){// 中略.container-profile{padding:2rem;display:flex;flex-direction:column;&__right.responsive{display:block;p.top{font-size:3rem;}.header-line{width:20%;margin:2remauto3rem;}}&__right:not(.responsive){// &__rightの.responsiveを除きスタイルを適用するtext-align:center;font-size:2rem;padding:3rem0;line-height:55px;p.bottom{padding-bottom:2rem;}p.top,.header-line{display:none;}}}}クラス名を変えるなりすれば簡単でしょうが、:not()をあえて使ってみました