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.
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 {
}
Try this:
.example6 #name, .example6 #email, .example6 #subject {
...
}
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]{...}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.