CSS Selecting elements that are immediate children only
I have been working on my integration skills recently with @Trullock and have been really enjoying it. Coming from a foul tables background and not really looking at much CSS for a couple of years has left me in a bit of a rut. Especially when it comes to integrating from a proper design from scratch and not just pinching bits from all over the place. I will try and publish some more little gems I have been shown when I get round to it.
I was quite pleased with this CSS Selector. We used this both in the CSS and for getting a hold of things in JQuery.
When you want to select only immediate children of a class, id or element you can use the following:
.parent.child /* For immediate children that are classes... */
/parent > ul /* For immediate children that are elements... */
This will then stop the browser / jquery looking further down the tree and wasting time, memory and potentially finding something you don't want the style to apply to or JQuery to get hold of.
This might be obvious to some but it was a nice little tip for me!