0

<span id="roll1">this is someone </span>
<span id="roll2">this is someone c </span>
<span id="roll3">this is someone b </span>
<span id="roll4">this is someone a </span>
<span id="roll5">this is someone d </span>
<span id="roll6">this is someone e</span>
<span id="roll7">this is someone f</span>

How can I provide same color to all these id using a external CSS file?

Ali Esmailpor
  • 1,215
  • 2
  • 9
  • 20
Yash Goenka
  • 7
  • 3

4 Answers4

3

You can use CSS selector, id^='roll' means id begins with roll

span[id^='roll'] {
  color: green;  
}
<span id="roll1">this is someone </span>
<span id="roll2">this is someone c </span>
<span id="roll3">this is someone b </span>
<span id="roll4">this is someone a </span>
<span id="roll5">this is someone d </span>
<span id="roll6">this is someone e</span>
<span id="roll7">this is someone f</span>
Chris
  • 1,692
  • 11
  • 15
2

Add one class name in all span and add color in that class like this: .red {color: red}

.red{
  color: red;
  display:block;
}
<span id="roll1" class="red">this is someone </span>
<span id="roll2" class="red">this is someone c </span>
<span id="roll3" class="red">this is someone b </span>
<span id="roll4" class="red">this is someone a </span>
<span id="roll5" class="red">this is someone d </span>
<span id="roll6" class="red">this is someone e</span>
<span id="roll7" class="red">this is someone f</span>
Minal Chauhan
  • 5,982
  • 8
  • 20
  • 39
2

If all ids start with roll you can try something like this span[id^=roll] ^= denotes selector start with.

span[id^=roll] {
 color: red;
}
<span id="roll1">this is someone </span>
<span id="roll2">this is someone c </span>
<span id="roll3">this is someone b </span>
<span id="roll4">this is someone a </span>
<span id="roll5">this is someone d </span>
<span id="roll6">this is someone e</span>
<span id="roll7">this is someone f</span>

Another approach is to add a wrapper element and target the child elements.

Example

.roll-container > span {
  color: blue;
}
<div class="roll-container">
  <span id="roll1">this is someone </span>
  <span id="roll2">this is someone c </span>
  <span id="roll3">this is someone b </span>
  <span id="roll4">this is someone a </span>
  <span id="roll5">this is someone d </span>
  <span id="roll6">this is someone e</span>
  <span id="roll7">this is someone f</span>
</div>

how can i provide same color to all these id using a external css file?

You can also target the ids directly.

#roll1, #roll2, #roll3, #roll4, #roll5, #roll5, #roll6, #roll7 {
  color: red;
}
kiranvj
  • 27,729
  • 5
  • 65
  • 72
0
  <div class="spancolor">
    <span id="roll1">this is someone </span>
    <span id="roll2">this is someone c </span>
    <span id="roll3">this is someone b </span>
    <span id="roll4">this is someone a </span>
    <span id="roll5">this is someone d </span>
    <span id="roll6">this is someone e</span>
    <span id="roll7">this is someone f</span>
  </div>

Your CSS File :

.spancolor {
   color:#FFFFFF;
  }
Dhaval Darji
  • 465
  • 4
  • 18