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,209
  • 3
  • 11
  • 22
Yash Goenka
  • 7
  • 4

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
  • 2,117
  • 13
  • 18
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
  • 6,025
  • 8
  • 21
  • 41
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
  • 32,342
  • 7
  • 71
  • 76
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
  • 513
  • 5
  • 19