Liang Zhao Liang Zhao - 5 months ago 8
HTML Question

Concise way of writing CSS selector under certain id

I think this question was asked before, but I don't know with what term to do the search. Say I have the following code:

<div id="my-div">
<input type="text" class="my-text-input">
<input type="password" class="my-pwd-input">
<textarea class="my-textarea"></textarea>
</div>


In order to assign certain styles to all 3 elements inside
my-div
, I would write CSS like so:

<style>
#my-div .my-text-input, #my-div .my-pwd-input, #my-div .my-textarea {
border: 1px solid red;
}
</style>


Apparently the
#my-div
part is repeated serval times, in some cases, there might be 10 or more of those.

Question: What's the concise way of writing these CSS selectors?

Edit:

I need to add a
#my-div
before every element inside because I need something like a namespace, for I'm developing a Chrome extension, and I don't want my floating content page's styles to be messed up with the original page's.

By "all 3 elements inside
my-div
", I mean specifically selected classes, not "all", sorry for the ambiguousness.

@Mumpo's SASS way is what I'm expecting, but is there a "raw" CSS way of doing the same?

Answer

If you want to apply the style to all children elements, you could use:

<style>
#my-div * {
    border: 1px solid red;
}
</style>

Or assign all children a new class and style that class.

Another option would be to use SASS, which allow you to do nested selectors:

#my-div {
    .class1 {}
    .class2 {}
}