いくつかのクラスからあるクラスまでの範囲の要素にCSSを追加するには

Question

あるクラスからあるクラスまでの範囲の要素にCSSを追加するには？

私は要素の下にあります

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
} 
 
[roletype~='start-content']~* { 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<div>any div which does not want border<br>but the border is still vissible to this also</div> 
 
<p>any div which does not want border<br>but the border is still vissible to this also</p> 
 
<p>any div which does not want border<br>but the border is still vissible to this also</p> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>

私はCSSのボーダー左を追加したい：1pxのソリッドブルー;開始コンテンツから終了コンテンツまでの範囲のすべての要素に適用されます。それはjavascriptの、jqueryのソリューションを知っているonly..I CSSのソリューションを探して、箱のようになります

...

Answer 1

あなたはこれを達成するために属性セレクタを使用することができます。 〜から/へはできません。

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='start-content']~*{ 
 
    border-left:1px solid blue 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<br> 
 

 
<br> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>

Answer 2

あなたはこのように兄弟セレクタを使用することができます。

[roletype~='start-content']{ 
    border-top: 1px solid blue; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 
[roletype~='start-content']~p { 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 
[roletype~='end-content']{ 
    border-bottom: 1px solid blue; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 

これは、開始コンテンツの後、すべての段落の要素を選択し、左と右の境界線を適用します。

Answer 3

兄弟CSSセレクタ（+ ou〜）を使用していますが、この例のようにdivを追加して囲むのはなぜですか？ ：

[roletype='role'] { 
 
    border: 1px solid blue; 
 
}

<div roletype="role"> 
 
    <p roletype="role start-content">sdfdfsdddsd</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <div roletype="role end-content">sdfdfsdddsd</div> 
 
</div> 
 
<br> 
 

 
<br> 
 
<div roletype="role"> 
 
    <div roletype="role start-content">sdfdfsdddsd</div> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <div roletype="role end-content">sdfdfsdddsd</div> 
 
</div>

Answer 4

あなたはsiblingセレクタ~を使用することができます。境界線が壊れないようにするにはmarginからpまでを削除し、代わりにpaddingを追加してください。

コンテンツの兄弟は、あなたが境界線は、開始と終了のため、ではないそれを超えなければなりません*

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
    padding: 1em 0; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='start-content']~* { 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
    padding: 1em 0; 
 
} 
 
.other { 
 
    border: none; 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<div class="other">any div which does not want border<br>but the border is still vissible to this also</div> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>