How to add css for elements in range from some class to some class

Question

How to add css for elements in range from some class to some class?

I have below elements:

[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>

I want to add css border-left:1px solid blue; to all elements in range from start-content to end-content.

It should look like box, looking for css solution only..I know javascript,jquery solution...

Answer 1

You can use an attribute selector to achieve this. From/to is not possible.

[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

You can use the sibling selector like this:

[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;
}

This selects all the paragraph elements after the start content and applies the left and right hand border.

Answer 3

For that you cas use the sibling css slector (+ ou ~) but why don't you add and enclosing div to draw a box like in this example ? :

[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

You can use sibling selector ~. To not to have broken border remove margin to p and add padding instead.

If your content sibling is not only p then you can use *

[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>