2

要素にボーダーを適用したい

  1. クラス.xforms-requiredを持ち、要素を持たないspanOR
  2. input.xforms-requiredクラス を持つ要素の子孫である要素

だから私は思いつきます 

.xforms-required:not(span), .xforms-required input {
    border: 1px solid gold !important;
}

これがフィドルです。

Firefox 18.0.1 では正常に動作し、IE では動作しません (IE 8 でテスト済み)。borderCSS セレクターまたは属性 に問題があるかどうかはわかりません。

IE の jsFiddle でいくつかの問題に直面しているため、同じ短いスニペットを書きました 

<html>
    <body>
        <style>
            .xforms-required:not(span), .xforms-required input {
                border: 1px solid gold !important;
            }
        </style>
        <span class="xforms-required">
            <input>  // This should get border 
        </span>    
        <input class="xforms-required"> // This should get border    
    </body>
</html>

ばかげた質問かもしれませんが、CSSの人ではないので申し訳ありません..

Adriftが指摘したように、それは:not()IE9+ でサポートされています。IE7+ バージョンで同じことを達成するための他の代替手段

4

2 に答える 2