Добавить CSS для определенного диапазона

Question

Я хочу добавить * перед тем, как мой Enter Firstname, для этого я использую этот CSS, но это * добавляет оба значения Enter Firstname, Enter Lastname, потому что я добавляю css для span. Пожалуйста, помогите мне в этом, как добавить css для определенного диапазона без использования id.

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

Answer 1

Вы можете использовать pseudo selectors выбрать только первый р тег как так:

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

UPDATE: если вы хотите 2 пролеты из 3 вы можете сделать:

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

альтернативно если вы хотите сделать это для нечетных или даже элементов, которые вы можете использовать:

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

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

также, если вы хотите сделать это для каждого 5-го элемента, который вы можете сделать:

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