classの部分一致(前方・後方・部分)
2021/06/04
<前方一致>
HTML
<div class="box01"></div>
<div class="box02"></div>
<div class="clear box03"></div>
CSS
div[class^="box"] {
background:blue;
}
<後方一致>
HTML
<div class="box01-blue"></div>
<div class="box02-green"></div>
<div class="box03-blue"></div>
CSS
div [class$="blue"] {
background:blue;
}
<部分一致>
HTML
<div class="box01-hoge-blue"></div>
<div class="box02-green hoge"></div>
<div class="box03-blue-hoge"></div>
CSS
div [class*="hoge"] {
background:blue;
}
HTML
<div class="box01"></div>
<div class="box02"></div>
<div class="clear box03"></div>
CSS
div[class^="box"] {
background:blue;
}
<後方一致>
HTML
<div class="box01-blue"></div>
<div class="box02-green"></div>
<div class="box03-blue"></div>
CSS
div [class$="blue"] {
background:blue;
}
<部分一致>
HTML
<div class="box01-hoge-blue"></div>
<div class="box02-green hoge"></div>
<div class="box03-blue-hoge"></div>
CSS
div [class*="hoge"] {
background:blue;
}