Question

lets see this:

<div class="login_container">
  <div>Log in:</div>
  <div>Username:</div>
  <div>Jelszó:</div>
</div>

I want the “log in” text have another class. Normally, I would do this:

<div class="login_container">
  <div class="textCenter login_container_title">Log in:</div>
  <div>Username:</div>
  <div>Jelszó:</div>
</div>

but that would make it a bit complicated. I heard about :first or another magic ( < ) things in CSS, is there a way to do it more elegant?

Answer 1

You can do it in CSS with :first-child pseudo-element:

.login_container > div:first-child {color:#f00}

(For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.)

Or like Lohn Smith does it with jQuery:

$('.login_container div:first').addClass('highlight');​

A simple example at jsFiddle