【CSS】色々なセレクタの指定方法まとめ

よく使うものからちょっとマイナーなものまで、いざというときのための色々なセレクタの指定方法です。

CSSの記述は3つの要素でできている

念の為おさらいです。
CSSはセレクタ（どの要素の）、プロパティ（何を）、値（どのように）の3つの要素で構成されています。

親の中にある子要素。階層の深さは関係なく、該当すればすべて対象になる。

div p{
  color: #da3b03;
}

親のすぐ下の階層の子要素。孫要素以降は対象外。

div > p{
  color: #da3b03;
}

基準の要素より後に出てくる兄弟要素。同じ階層の要素が対象。

h1~p{
  color: #da3b03;
}

その要素に隣接した後続の要素。

p + p{
  color: #da3b03;
}

その属性を持っている要素。属性の値は問わない。

a[href]{
  color: #da3b03;
}

属性値の一部が一致している要素。位置に関係なく含まれていればすべて対象になる。
イコールの前に「*」をつける。

p[class*="aaa"]{
  color: #da3b03;
}

属性値の始まりが一致している要素。イコールの前に「^」をつける。

p[class^="aaa"]{
  color: #da3b03;
}

属性値の終わりが一致している要素。イコールの前に「$」をつける。

p[class$="aaa"]{
  color: #da3b03;
}

文章の1行目に対してスタイルを適用する。改行された文章は対象外。

p::first-line{
  color: #da3b03;
}

文章の1文字目に対してスタイルを適用する。

p::first-letter{
  color: #da3b03;
}

not(除外したいもの)で除外ができる。pのうちクラス名がaaaでないものに適用。

p:not(.aaa){
  color: #da3b03;
}

中身が空っぽの要素に対してスタイルを適用。

p:empty{
  display:none
}

タグの種類を問わず、すべての要素にスタイルを適用。

*{
  color: #da3b03;
}

文書構造の最上位の要素であるルート要素への指定。CSS変数を定義する時に使うことが多い。

:root{
  --orange: #da3b03;
}

/*使う時*/
.class{ 
  color: var(--orange);
}

beforeは要素の前に、afterは要素の後に疑似要素を追加する。指定するときはコロンの数は２つで、contentは必須。contentがないと疑似要素は生成されない。

div::before{
  content:'';
}

div::after{
  content:'';
}

a:link{
  color: #da3b03;
}

a:visited{
  color: #da3b03;
}

a:hover{
  color: #da3b03;
}

a:active{
  color: #da3b03;
}

input[type="text"]{
  border: 1px
}

textarea{
  border:1px
}

select{
  border:1px
}

input[type="checkbox"]{
  color: #da3b03;
}

/* チェック状態 */
input[type="checkbox"]:checked{
  color: #da3b03;
}

input[type="radio"]{
  color: #da3b03;
}

/* チェック状態 */
input[type="radio"]:checked{
  color: #da3b03;
}

input[type="submit"]{
  border :1px
}

ページ内リンクと組み合わせて使います。ページ内リンクをクリックして対象の要素にジャンプしたとき、その要素に対してスタイルを適用します。

/*クリック前のcss*/
#aaa{
  display: none;
}

/*クリック後のcss*/
#aaa:target{
  display: block;
}

○番目系のセレクタは別でまとめていますのでこちらも併せてご覧ください。