CODEWITHSUNDEEP
htmlcsscss-selectors
Shivam
Shivam

Reputation: 720

Add CSS for particular span

I want to add * before my Enter Firstname, for that i am using this CSS but that * is adding to both Enter Firstname, Enter Lastname, because i am adding css for span. Please help me in this how to add css for particualr span without using id to it.

<style>
    .pssmailform p span:before{
    content:"* ";
    color:red;
    }
</style>

<div class="pssmailform">
<p><span>Enter Firstname</span></p>
<p><span>Enter Lastname</span></p>
</div>

Upvotes: 0

Views: 357

Answers (1)

Petar Vasilev
Petar Vasilev

Reputation: 4735

You can use pseudo selectors to select only the first p tag like so:

<style>
    .pssmailform p:first-child span:before{
        content:"* ";
        color:red;
    }
</style>

UPDATE: if you want 2 spans out of 3 you can do:

<style>
    .pssmailform p:first-child span:before, .pssmailform p:nth-child(2) span:before{
        content:"* ";
        color:red;
    }
</style>

alternatively if you want to do it for odd or even elements you can use:

<style>
    .pssmailform p:nth-child(odd) span:before {
        content:"* ";
        color:red;
    }

    .pssmailform p:nth-child(even) span:before {
        content:"* ";
        color:blue;
    }
</style>#

also if you want to do it for every 5th element you can do:

<style>
    .pssmailform p:nth-child(5n) span:before {
        content:"* ";
        color:red;
    }
</style>

Upvotes: 3

Related Questions