Question

I want to use CSS to style two different inputs, but in my CSS file use only one declaration for both classes. Here is what I tried

HTML:

<input type="text" name="data_start" id="data_start" class="data_start" />
<input type="text" name="data_end" id="data_end" class="data_end" />

CSS:

.data_start .data_end { width:68px; margin-left:5px; }

If I use the code above, my inputs don’t get styled, but if I do the following in my CSS file, it will work:

.data_start { width:68px; margin-left:5px; }
.data_end { width:68px; margin-left:5px; }

Can someone explain why the first CSS statement doesn’t work?

Answer 1

.data_start .data_end means an element .data_end inside a .data_start element.

.data_start, .data_end means it applies to .data_start and .data_end elements.