Question

I am not sure if I remember correctly, but I think I read once that using the > selector in css rules was bad practice? Can someone shed some light on this topic?

For example:

<style>
#search-form {
 ... whatever rules...
}
#search-form > input[type=text] {
 ... rules...
}
#search-form > button {
 ... rules ...
}
</style>
<form id="search-form">
    <input type="text" placeholder="Search...">
    <button>Search!</button>
</form>

Answer 1

It’s certainly not bad practice, but should be used with knowledge of the benefits and disadvantages. Using the child selector (E > F) will select only immediate children and, since this prevents complete descendant traversal, will take the browser less time to apply then a descendant selector (E F). However, the element isn’t supported in IE6, so if that matters to you, steer clear.

This has a good write up and some nice links: CSS child vs descendent selector