Zenn
🐵

【css】class名、id名を前方一致、後方一致、部分一致で指定する方法

2024/12/10に公開

https://zenn.dev/saru_no_note/articles/513b7838ce01ca

上記で一緒に説明しようと思ったけれど、使うタイミングが別の事が多いので、記事を別にしました。

前方一致

^=" で指定

[id^="forward"] {
  font-size: 24px;
}
[class^="forward"] {
  font-size: 24px;
}

後方一致

$=" で指定

[id$="backward"] {
  font-size: 24px;
}
[class$="backward"] {
  font-size: 24px;
}

部分一致

*= で指定

[id*="part"] {
  font-size: 24px;
}
[class*="part"] {
  font-size: 24px;
}

and条件

単純に続けるだけ

[id*="a"][id*="b"]{
  font-size: 24px;
}
[class*="a"][class*="b"]{
  font-size: 24px;
}

or条件

, でつなげる

[class*="a"],[id*="b"]{
  font-size: 24px;
}

サンプル

Discussion

ログインするとコメントできます