Doubt in css selector > [#id (.class1 or .class2)]

Question

Hi,

I think that it should exist a better way of doing this...

I'm using the follow css selector

#book_form .ano_chegada, #book_form .ano_partida {...}

Html:

<form id="book_form">
<input class='ano_chegada' .../>
<input class='ano_partida' .../>
</form>

I really don't like to repeat the form id twice. Is it strictly necessary? I know that it should work without the second id (#book_form) but it will select all the elements which share the same class (.ano_partida), right?

Thank you =) (Obrigado, in portuguese)

Cheers from Portugal

Answer 1

Yes, it is strictly necessary if you want to select only elements with those classes that live inside #book_form.

CSS by itself doesn't feature nested selectors, however some server-side solutions may provide you with CSS extensions that grant you such functionality.

Answer 2

Only one browser vendor has implemented this feature, 4 months ago in a browser still in beta. See http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

Answer 3

You could adjust your HTML a bit to make the CSS selectors easier to use. (This is not necessarily worth it, and could increase the size of your output.)

Add another class name to the class tags:

<form id="book_form"> 
<input class='ano_chegada something' .../> 
<input class='ano_partida something' .../> 
</form>

#book_form .something {...}

Or split what is there into multiple classes:

<form id="book_form"> 
<input class='ano chegada' .../> 
<input class='ano partida' .../> 
</form>

#book_form .ano {...}