個人的に使ってよかったCSS編

個人的に便利と思ったCSSを記載していく。
あくまでも個人の記録用としての使用として追記していく予定です。

1. class$=

説明
cssのセレクタ指定方法にてセレクタ名の後方一致

[class$="__inner"]{
    padding: 0 10vw;
}

コメント：
他にも、前方一致や部分一致でも設定できる。

div[id^="block__"] { /* セレクタ名の前方一致 */
   background-color: white;
}

div[id*="text"] { /* セレクタ名の部分一致 */
  font-size: 15px;
}

２. 親(要素) >子(要素)

説明
特定の要素の直下の要素だけに一括で設定

#container>* {
　　margin: 0 10px;
}

３. picture

説明
sourceタグの属性に条件を指定することで、「〇〇px以上のときはbnr_r.pngを表示する」のようにレスポンシブ対応が可能

<picture>
    <source srcset="<?php echo get_template_directory_uri(); ?>/imgs/top/bnr_r.png"  
media="(max-width: 530px)" >
     <img src="<?php echo get_template_directory_uri(); ?>/imgs/top/bnr.png" 
alt="bnr" width="100%">
</picture>

参考