将CSS应用于div的第一个标签

Question

i would like to apply a specific css to a specific label in my html this is my HTML

<div id="registration">
    <div>
        <label>Localisation</label>**//this is the target label to apply css** 
        <div id="registration_localisation">
            <div>
                <label>Gouvernorat</label>
                <select id="registration_localisation_gouvernorat">
                  <option value="1">Ariana</option>
                  <option value="2">Ben Arous</option>
                  <option value="3">Bizerte</option>
               </select>
                </div>
                 <div>
                <label for="registration_localisation_ville">Ville</label>
                <input type="text" id="registration_localisation_ville">
                 </div>
               </div>
         </div>
         <div>
        <label>Annonceur</label>**//this is the target label to apply the css** 
        <div id="registration_annonceur">
            <div>
                <label for="registration_annonceur_Nom">Nom</label>
                <input type="text" id="registration_annonceur_Nom">
            </div>
            <div>
                <label for="registration_annonceur_Email">Email</label>
                <input type="text" id="registration_annonceur_Email">
            </div>
            <div>
                <label for="registration_Telephone" >Telephone</label>
                <input type="text" id="registration_annonceur_Telephone">
            </div>
        </div>
         </div>

</div>

i used many pseudo classes but i didn't find any solution any idea please ?

Answer 1

try this way where you can style all your label inside the div contained into registration

#registration > div > label{
   //your css
}

DEMO

Answer 2

Just give it a class. Classes may be repeated in HTML, like;

<label class="class1">Localisation</label>

and in your css,

.class1{
  //styling
}

Answer 3

CSS3 way

#registration div label:first-child {
    // specific styles for just the first label item
}

Or

#registration div label:nth-first-of-type{
// specific styles for just the first label item
}

jQuery Way

<script>
$( "#registration div label:first" ).css( "font-style", "italic" );
</script>

Answer 4

How about

#registration > div > label:first-of-type {}

?

Answer 5

Match labels who are the first, direct child of a div.

div > label:first-child {}

Actually it would be much better if you could add some classes to your elements. Matching wide selector such as div is a bad idea for future maintainability. Changing your markup will break your style.