Reputation: 157
I have two spans as
<span class="class-1">Text1</span>
<span class="class-1">Text2</span>
And .class-1
has the styles
.class-1 {
font-weight: bold;
color: red;
}
Now I need to remove the font-weight: bold
from the .Text-2
, can this be done without creating another css class?
Upvotes: 0
Views: 85
Reputation: 22643
<span class="class-1">Text1</span>
<span class="class-1">Text2</span>
And class-1 has the styles
.class-1 {
font-weight: bold;
color: red;
}
.class-1 + .class-1{/*this will be applied on the secound span*/
font-weight: normal;
color:green;
}
this alternative:
.class-1 {
font-weight: bold;
color: red;
}
.class-1:last-child{/*this will be applied on the secound span*/
font-weight: normal;
color:green;
}
/*or this*/
.class-1:nth-child(2){
font-weight: normal;
color:green;
}
inline css
<span class="class-1" style="font-weight: bold;color: red;">Text1</span>
<span class="class-1" style="font-weight: normal;color:green;">Text2</span>
and if you have something in between
HTML:
<span class="class-1">Text1</span>
<p>Hello do you have time to talk about Css?</p>
<span class="class-1">Text2</span>
CSS:
.class-1 {
font-weight: bold;
color: red;
}
.class-1:nth-of-type(2) {
font-weight: normal;
color: green;
}
Upvotes: 1
Reputation: 441
Assuming your code looks roughly something like this
<style>
.class-1 {
font-weight: bold;
color: red;
}
</style>
<span class="class-1">Text 1</span>
<span class="class-1">Text 2</span>
You could add the style attribute to Text 2's span if you absolutely cannot create a class. Altered it looks like below.
<span class="class-1" style="font-weight: normal;">Text 2</span>
Upvotes: 1