父类中多个ID的CSS选择器

Question

I am looking for a way to target several different id's within a parent class with a css selector.

I am aware that its not common to do this since id's need to be unique in order to validate, and thus there is limited practical use for such a solution. I was initially intending to use this code for a school project. I've since found a valid workaround but I still wonder if this can be done, and if so how.

           <form class="example6">
                <div>
                    <h3>Contact form</h3>
                    <label>
                        <span>Your name</span><input  id="name" type="text" name="name" />
                    </label>

                    <label>
                        <span>Email Address</span><input id="email" type="text" name="email" />
                    </label>

                    <label>
                        <span>Subject</span><input  id="subject" type="text" name="subject" />
                    </label>

                    <label>
                        <span>Message</span><textarea  name="feedback"></textarea>

                    </label>
                 </div>
             </form>

I want to select #name, #email and #subject, but only if within .example6.

Answer 1

A descendant selector is a way to select only children of the ancestor / parent ( parent child ) whether they are elements, classes, IDs etc. The selection is denoted by the space between selectors

.example6 #name {

}

You can comma separate for multiple selectors and apply the same CSS

.example6 #name, .example6 #email, .example6 #subject {

}

jsFiddle Demo

Answer 2

You can use this:

.example6 > div > label > input{
    border-color: red;
}

fiddle

Answer 3

Try this:

.example6 #name, .example6 #email, .example6 #subject {
    ...
}

Answer 4

There are several ways to do this.

You can comma separate multiple expresions:

.example6 #name, .example6 #email, .example6 #subject {...}

or find something else that's unique to the element (eg: they are the only inputs within .example6 )

.example6 input{...}

or use attribute selectors to get just the inputs having type=text:

.example6 input[type=text]{...}

http://jsfiddle.net/au0drh1w/