42703


Wordpressにて進捗状況を示すバーを作成しています。

下記のHTMLに対して、CSSを反映させたいのですがうまく反映されません。

下記以外のコードでもいくつか試してみたのですが、反映されるものと反映されないものがあり、原因が特定できずです。

ご教授いただけば幸いです、よろしくお願いいたします。

HTML

[code]

     <ul class="ui-step-bar">
            <li class="done">
                <span>STEP1</span>
            </li>
            <li class="done">
                <span>STEP2</span>
            </li>
            <li>
                <span>STEP3</span>
            </li>
            <li>
                <span>STEP4</span>
            </li>
            <li>
                <span>STEP5</span>
            </li>
        </ul>
    
[/code]

CSS

[code]

            .ui-step-bar {
            $barMargin: 8px 0;
            $ballSize: 32px; // ボールの大きさ
            $labelWidth: 80px; // ラベル領域の幅。枝の両端の空白もここで決まる
            $labelFontSize: 12px; // ラベルのフォントサイズ
            $labelFontColor: #ccc; // ラベルのフォントカラー
            $labelFontColorActive: #666; // ラベルのフォントカラー
            $labelPadding: 2px; // ラベルのpadding
            $labelGap: 4px; // ボールとラベルのギャップ(px指定)
            $branchWidth: 8px; //枝の太さ
            $pendingColor: #ccc; // 待受中の色
            $doneColor: #494; // 完了時の色
            $unitHeight: $ballSize + ($labelGap + $labelPadding*2 + $labelGap)*2; //プログレスバーの高さ
            &,
            &>li {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            & {
                display: flex;
                width: 100%;
                box-sizing: border-box;
                padding: 0 $labelWidth/2;
                position: relative;
                height: $unitHeight;
                margin: $barMargin;
            }
            >li {
                width: 100%;
                position: relative;
                >span {
                    position: absolute;
                    display: block;
                    box-sizing: border-box;
                    width: $labelWidth;
                    margin: 0 $labelWidth*-0.5;
                    padding: $labelPadding;
                    top: ($unitHeight + $ballSize) * 0.5 + $labelPadding;
                    color: $labelFontColor;
                    right: 0;
                    font-size: $labelFontSize;
                    text-align: center;
                    line-height: 1em;
                }
                &:before,
                &:after {
                    content: "";
                    position: absolute;
                    display: block;
                    top: 50%;
                }
                // ボールの間の枝
                &:before {
                    width: 100%;
                    height: $branchWidth;
                    margin: $branchWidth*-0.5 0;
                    background-color: $pendingColor;
                    z-index: 1;
                    left: 0;
                }
                &:after {
                    width: $ballSize;
                    height: $ballSize;
                    margin: $ballSize*-0.5;
                    border-radius: 100%;
                    background-color: $pendingColor;
                    z-index: 2;
                    right: 0;
                }
                // ここがみそ。最初のLI要素のwidthは0にし、疑似要素の枝を非表示にする。
                &:first-child {
                    width: 0;
                    &:before {
                        display: none;
                    }
                }
                &.done {
                    >span {
                        color: $labelFontColorActive;
                    }
                    &:before,
                    &:after {
                        background-color: $doneColor;
                    }
                }
            }
        }
    
[/code]


CC BY-SA 3.0
2018-03-28T06:53:20.233
42698
2018-03-28T07:52:42.377
27824
question
html css wordpress
HTMLにCSSがうまく反映されない


CSSには`優先度(詳細度)`というものがあります。  
その名の通り「どのスタイルを適応するか」を決めるもので、優先度が低い場合にはどれだけCSSを書いても適応されない場合があります。

最近のブラウザには開発者ツールが備えられており、そこで詳細度を確認することができます。  
windowsの場合F12キーを押すとツールを開けますので、そこで確認してください。

[CSS 詳細度](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)


CC BY-SA 3.0
2018-03-28T07:52:42.377
42703
2018-03-28T07:52:42.377
17324
42698
answer