CSSセレクタでor条件(AまたはB)and条件(AかつB)で複数指定する方法マンガでわかるホームページ作成ホームへCSSセレクタでor条件(AまたはB)and条件(AかつB)で複数指定する方法2020年04月03日CSSセレクタにおいて、クラスAにもクラスBにも指定したいとき、クラスAとクラスB両方指定されている場合のみ指定したいときがあるかと思います。CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法を説明します。セレクタの基礎はこちら↓CSSセレクタとは【CSSを適用させる対象】どのhtmlタグを対象とするのか指定するのがCSSセレクタです。classやid、そのほかよく使うセレクタを紹介します。a[href="index2.php"]:link::after複数クラス指定するメリットor条件(AまたはB)の場合CSS修正が楽コードが少なくて済むand条件(AかつB)の場合クラスを指定することなく条件指定できるまとめor条件(AまたはB)はカンマ区切り.A,.BAにもBにも指定する場合です。あいだに「,(カンマ)」を記述します。「,」の前後には空白があってもOKです。「{」の直前に「,」があってはいけません。B">ABかかる</p>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むand条件(AかつB)は密接.A.BAとB両方が指定されているタグにのみ指定する場合です。空白も「,」もあってはいけません。B">ABかかる</p>セレクタはクラス以外にも複数あり、それらにもand条件を使うことで必要以上にクラスを付与しないことができます。以下で具体例を挙げてさらに説明します。そもそもどんなセレクタがあるのかわからないというかたはこちらをご確認ください。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。class="C">div.Cかかる</div>上記のようにクラスCのdivのみに指定できます。要素セレクタは必ず最初に指定しそのあとクラスなどを密接させます。value="テキスト">これまで同様セレクタ同士を密接させます。ちなみに「input[type="text"].D」も「input.D[type="text"]」も同じです。class="E">リンク</a>これまで同様セレクタ同士を密接させます。ちなみに「.E:link」も「:link.E」も同じです。href="index.php">リンク</a>これまで同様セレクタ同士を密接させます。ちなみに「a[href="index.php"]:visited」も「a:visited[href="index.php"]」も同じです。a[href="index2.php"]:link::afterいっぺんにやってみましょう。href="index2.php">リンク</a><style>a[href="index2.php"]:link::after{content:"after";color:orange;}</style>これまで同様セレクタ同士を密接させます。疑似要素は必ず最後です。入れ替えると効きません。複数クラス指定するメリットor条件(AまたはB)の場合CSS修正が楽デザイン上AとB両方同じ数値を指定することが明らかなときは「AまたはB」の形で指定しておくと微調整・CSS修正が楽です。class="B">Bかかる</p>↑↓どちらもまったく同じ結果になります。class="B">Bかかる</p>コードが少なくて済むコードが少ないということはそれだけミスが減ります。and条件(AかつB)の場合クラスを指定することなく条件指定できる疑似クラスや属性セレクタを指定することでクラスの指定が不要になる場合があります。コードが少なくて済む分ミスも減ります。あいだに「,(カンマ)」を記述します。以上、CSSセレクタでor条件(AまたはB)、and条件(AかつB)で複数指定する方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。