CSS styles for input elements named dynamically

Question

I have:

    <input type="text" id="email[1]" name="email[1]"> 
    <input type="text" id="email[2]" name="email[2]">
.
. 

That's been populated using php. Inside a for loop there's:

echo "<input type='text' id='email[".$i."]' name='email[".$i."]'> ";

As I don't know the number of inputs that are going to be created, how can I give styles to them?

Answer 1

If they are all going to have the same style, you could use classes. For example:

echo "<input type='text' class='emailinput' id='email[".$i."]' name='email[".$i."]' /> ";

And in the CSS you can style the elements like this:

.emailinput
{
    width:              20px;
    background-color:   red;
}

By the way, I have added a slash to the end of the input element. This is for XHTML valid code. You should do this for all input elements (/>).

Answer 2

HTML:

<input class="anything you want" ... />

CSS:

.anything {
...
}
.you {
...
}
.want {
...
}