CODEWITHSUNDEEP
csscss-selectors
civiltomain
civiltomain

Reputation: 1166

Css selectors help needed

I have this composition :

<div class="theclass1"> 
     <input type="checkbox" id ="1">
     <div>
        <div>
          <div>
          <label for="1">bla bla</label>
          </div>
        </div>
        <input type="checkbox" id ="yy">
        <label for ="yy">other</label>
     </div>

  <div class="theclass2">  
    <input type="checkbox" id ="2">
    <div>
      <div>
         <div> 
         <label for="2">bla bla</label>
        </div>
      </div>
        <input type="checkbox" id ="xx">
        <label for ="xx">other</label>
    </div>  
  </div>

</div>

I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'

I'm playing with first-of-type, first child, +div >div>div ,etc... without success.

Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?

I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2. Now I have a polluted css and undesirable results.

(The div 'theclass2' is inside div theclass1.)

Thanks in advance.

Upvotes: 0

Views: 69

Answers (5)

dkode
dkode

Reputation: 206

problem is not the CSS only, There are serious semantics errors in your HTML

  • id attribute name must not start with numbers

taken from HTML4 document of w3c

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

  • so much nesting , why these extra parent div div and div?
  • now first you fix the HTML nodes then apply below css

iff you want only first label of first div class 

 .theclass1:first-child > label:first-of-type

working DEMO

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

 .theclass1 > div > div > div label {color:red;}

Upvotes: 0

Fen1kz
Fen1kz

Reputation: 1110

General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)

And it's better to introduce class or id for this label.

However, if you want to target it without modifying HTML, you can use this selector:

label[for='1'] {
    background:red
}

Upvotes: 0

Sydonia
Sydonia

Reputation: 107

.theclass1 label:first-child {
color:red;
}

You could use this probably similiar code for label in .theclass2

Upvotes: 0

Kamil Mikolajczyk
Kamil Mikolajczyk

Reputation: 911

.theclass1 > div:first-of-type > div > div > label {
    color: red;
}

http://jsfiddle.net/807t5L6z/

Upvotes: 0

Related Questions