Q&A
ベストアンサー
<label class="" for="">
といったことです
特定のlabelを選んでCSSで設定したいです。
今あるコードだと、タブ内のプラグインで作っている見積書の中のラベルも
真ん中にアラインされてしまい、見かけが悪くなってしまいます。
tab1からtab5のラベルだけにCSSのtext-align: centerをあてたいです。
html
1<div class="cp_tab"> 2<div class="cp_tabpanels"> 3<label for="tab5_1">tab 1</label> 4<input id="tab5_1" name="cp_tab" type="radio" checked="checked"> 5<div class="cp_tabpanel"> 6<h4>First Tab</h4> 7<p>First Tab text</p> 8</div> 9</div> 10<div class="cp_tabpanels"> 11<label for="tab5_2">tab 2</label> 12<input id="tab5_2" name="cp_tab" type="radio"> 13<div class="cp_tabpanel"> 14<h4>Second Tab</h4> 15<p>[zigaform-estimator id="6"]</p> 16</div> 17</div> 18<div class="cp_tabpanels"> 19<label for="tab5_3">tab 3</label> 20<input id="tab5_3" name="cp_tab" type="radio"> 21<div class="cp_tabpanel"> 22<h4>third Tab</h4> 23<p>Second Tab text</p> 24</div> 25</div> 26<div class="cp_tabpanels"> 27<label for="tab5_4">tab 4</label> 28<input id="tab5_4" name="cp_tab" type="radio"> 29<div class="cp_tabpanel"> 30<h4>forth Tab</h4> 31<p>forth Tab text</p> 32</div> 33</div> 34<div class="cp_tabpanels"> 35<label for="tab5_5">Tab 5</label> 36<input id="tab5_5" name="cp_tab" type="radio"> 37<div class="cp_tabpanel"> 38<h4>Fifth Tab</h4> 39<p>fifth Tab text</p> 40</div> 41</div> 42</div>
CSS
1*, *:before, *:after { 2 -webkit-box-sizing: border-box; 3 box-sizing: border-box; 4} 5.cp_tab { 6 display: block; 7 display: -webkit-flex; 8 display: flex; 9 -webkit-flex-wrap: wrap; 10 flex-wrap: wrap; 11 margin: 1em auto; 12 overflow: hidden; 13} 14.cp_tab input[type='radio'] { 15 border-bottom: 1px solid rgba(239, 237, 239, 0.5); 16 cursor: pointer; 17 -webkit-appearance: none; 18 appearance: none; 19 display: block; 20 width: 100%; 21 outline: none; 22 -webkit-transition: all 0.3s ease-in-out; 23 transition: all 0.3s ease-in-out; 24} 25.cp_tab .cp_tabpanels label { 26 cursor: pointer; 27 display: block; 28 line-height: 1em; 29 padding: 2rem 0; 30 text-align: center; 31} 32.cp_tab [type="radio"]:hover, 33.cp_tab [type='radio']:focus { 34 border-bottom: 1px solid #fd264f; 35} 36.cp_tab [type='radio']:checked { 37 border-bottom: 2px solid #fd264f; 38} 39.cp_tab [type='radio']:checked + .cp_tabpanel { 40 opacity: 1; 41} 42.cp_tab [type='radio'] + .cp_tabpanel { 43 display: block; 44 opacity: 0; 45 padding: 2rem 0; 46 width: 90%; 47 -webkit-transition: all 0.3s ease-in-out; 48 transition: all 0.3s ease-in-out; 49} 50.cp_tab .cp_tabpanels { 51 width: 20%; 52} 53.cp_tab .cp_tabpanels [type='radio'] + .cp_tabpanel { 54 width: 500%; 55} 56.cp_tab .cp_tabpanels [type='radio']:checked + .cp_tabpanel { 57 margin-left: 0; 58} 59 60.cp_tab .cp_tabpanels:nth-child(2) [type='radio']:checked + .cp_tabpanel { 61 margin-left: -100%; 62} 63.cp_tab .cp_tabpanels:nth-child(3) [type='radio']:checked + .cp_tabpanel { 64 margin-left: -200%; 65} 66.cp_tab .cp_tabpanels:nth-child(4) [type='radio']:checked + .cp_tabpanel { 67 margin-left: -300%; 68} 69.cp_tab .cp_tabpanels:nth-child [type='radio']:checked + .cp_tabpanel { 70 margin-left: -400%; 71}
試したこと
ネットで調べてCSSのこの部分を
.cp_tab .cp_tabpanels label[for=tab5_1] {
cursor: pointer;
display: block;
line-height: 1em;
padding: 2rem 0;
text-align: center;
}
としたところ、初めのタブだけにスタイルの設定があたりました。
ですが、tab2からtab5にもこの設定をあてたいのです。
[for=tab5_1 tab5_2][for=tab5_1, tab5_2][for=tab5_1; tab5_2]
など色々試してみましたがうまくいきません。
どなたかお知恵を貸していただけますでしょうか。
よろしくお願い致します。
回答2件
0
複数の指定をしたければ,で区切ります。
※以下は #a 配下の b,c,dにあてたいとき
css
1#a .b 2,#a .c 3,#a .d 4{}
ただ、「同じ指定にしたい」のであれば対象のlabelに同じクラスを振ってCSSもそのクラスだけにあてたほうが効率的と思います。
投稿2020/05/11 19:34
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/11 19:57
2020/05/11 20:07
2020/05/11 20:48 編集
2020/05/11 20:49 編集
2020/05/11 20:52
2020/05/11 20:57
2020/05/11 21:05
2020/05/11 21:06