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