ラジオボタンを記述する際のsassの書き方がわかりません。

###ラジオボタンのscssの記述方法が知りたい

scssの書き方が間違っているのでcssにコンパイルした際に希望通りの記述になっていない。
afterの書き方が間違っているのは分かったのですがどこの書き方が分からないです・・。

うまくコンパイルされていないのでラジオボタンのデフォルトでチェックされるafter要素の装飾が表示されないです。
(濃い緑のチェックがつかない)

※元々cssで書いていたものをscssに記述し直しています。

###該当のソースコード

元々記述していたcss（この通りにコンパイルさせたい）

css
1
2.form-radiobtn input[type="radio"]:checked + label:after {
3    position: absolute;
4    content: "";
5    top: 50%;
6    left: -4px;
7    width: 16px;
8    height: 16px;
9    vertical-align: middle;
10    margin-top: -4px;
11    border-radius: 50%;
12    background: #00968d;
13}
14

間違えてコンパイルされたcss

css
1input[type='radio']:checked + .form-radiobtn label:after {
2  position: absolute;
3  top: 34%;
4  left: -4px;
5  width: 16px;
6  height: 16px;
7  margin-top: -4px;
8  content: '';
9  vertical-align: middle;
10  border-radius: 50%;
11  background: #00968d;
12}
13

記述が間違っていると思われるscss

scss
1.form-radiobtn {
2  
3  label {
4    display: inline-block;
5    position: relative;
6    cursor: pointer;
7    margin: 0 40px 0 8px;
8    padding-left: 28px;
9    border-radius: 2px;
10    color: #333333;
11    font-size: 16px;
12    text-align: center;
13    line-height: 1;
14    
15    &:before {
16      position: absolute;
17      content: "";
18      top: 34%;
19      left: -10px;
20      width: 24px;
21      height: 24px;
22      vertical-align: middle;
23      margin-top: -10px;
24      border: solid 2px #c8d7d6;
25      background: #FFF;
26      border-radius: 50%;
27    }
28    
29    input[type="radio"]:checked + &:after {
30      position: absolute;
31      content: "";
32      top: 34%;
33      left: -4px;
34      width: 16px;
35      height: 16px;
36      vertical-align: middle;
37      margin-top: -4px;
38      border-radius: 50%;
39      background: #00968d;
40    }
41  }
42

html
1 <td class="form-radiobtn">
2  <dl>
3    <dd class="input-hidden">
4      <input type="radio" name="gender" id="select1" value="man" checked="">
5      <label for="select1">男</label>
6    <dd class="input-hidden">
7      <input type="radio" name="gender" id="select2" value="woman">
8      <label for="select2">女</label>
9    </dd>
10    </dd>
11  </dl>
12</td>

###補足情報(言語/FW/ツール等のバージョンなど)

言語：HTML5,CSS3
使っているツール：atom,gulp,Git
ブラウザ：mac chrome最新

行動規範の内容に同意します

回答1件

ベストアンサー

scss
1.form-radiobtn {
2  input[type="radio"]:checked + label {
3    &:after {
4      position: absolute;
5      content: "";
6      top: 34%;
7      left: -4px;
8      width: 16px;
9      height: 16px;
10      vertical-align: middle;
11      margin-top: -4px;
12      border-radius: 50%;
13      background: #00968d;      
14    }
15  }
16}

これじゃダメですか？
「&」親セレクタを参照するものなので、間違いの例のようにinput[type="radio"]:checked + &:afterと書いてしまうと親セレクタである.from-radiobtnを参照して.form-radiobtn:afterとなってしまうのは当然かと思われます。

投稿2016/11/05 18:06

編集2016/11/05 18:07