現在、ウェブアプリケーションを作成しております。
レスポンシブにしようとしているのですが、どうも上手くできません。
以下のCSSのコードで、
sp-mainを非表示。
でも、sp-mainの中のpc-mainは例外で表示。
という命令をCSSで行なっているのですが、何故か
swiper-slide clearfixまで一緒に表示されてしまいます。
どういうCSSを書けば、sp-main内のpc-mainだけ表示されるようになるでしょうか。
CSS
1#main_column .sp-main :not(.swiper-container .swiper-wrappe .pc-main){ 2 display: none; 3}
HTML
1 2<div class="pc-main"> 3 <div class="event-wrapper"> 4 5 </div> 6</div> 7 8<div class="sp-main"> 9 <div class="swiper-container"> 10 <div class="swiper-wrapper"> 11 12 <div class="swiper-slide clearfix"> 13 14 </div> 15 16 <div class="pc-main"> 17 <div class="event-wrapper"> 18 19 </div> 20 </div> 21 22 <div class="swiper-slide clearfix"> 23 24 </div> 25 26 <div class="pc-main"> 27 <div class="event-wrapper"> 28 29 </div> 30 </div> 31 32 <div class="swiper-slide clearfix"> 33 34 </div> 35 36 </div> 37 </div> 38</div>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。