Techonthenet
Techonthenet

Reputation: 157

Font settings in css

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

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Fiddle

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

Fiddle

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

Fiddle

Upvotes: 1

Andrew Revak
Andrew Revak

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

Related Questions