css id wildcard selector with children
css, selector, wildcard
Solution
Well actually your code works fine.
Look at this:
<div id="row3">
<div class="element">three</div>
</div>
<div id="notARow">
<div class="element">three</div>
</div>
With
[id*="row"] .element {color: red}
.. and notice that the id's with row is red.
FIDDLE
For more info about attribute selecors - check out the spec
If I were to guess why this didn't work for you, I would say that the problem is related to specificity.
To check this, right-click 'inspect element' on one of the .element classes and see if your attribute selector rule is crossed out / overridden by a more specific rule.
Problem
i dont know exactly how to explain this but i have the following situation. I have many divs whose IDs start with "row", such as row1, row2, etc. All of them contain another div which has a class called "element". What i want to do is to create a rule for all those "element" divs so i wrote something like this: ``` [id*="row"] .element {width:0;} ``` My html is like this: ``` <div id="row1"> <div class="element"></div> </div> <div id="row2"> <div class="element"></div> </div> <div id="row3"> <div class="element"></div> </div> and so on... ``` It didn't work. Could you please tell me what's wrong? By the way, i cant just add a rule for "element" only because other divs with different IDs have "element" inside too and are supposed to have different styles.