Eric's Universal Child Selector

A couple of weeks ago Eric Meyer published a little revelation on mimicking the Universal Child Selector. Although I read it at the time, it probably took a week to sink in to the point where it was of real use to me. I thought I’d look at that here.

In case, you’re not familiar with the child selector, here’s the exec summary.

Although it sounds like some weird ‘sci-fi cloning experiment’, the ‘child selector’ is actually a nifty idea that allows you to set rules that will only be applied when a given element is directly inside a specified other.

In practice, where:

‘div#box p {…}’ effects every P anywhere inside a DIV called ‘#box’

‘div#box>p {…}’ effects only the P’s one level inside the DIV called ‘#box’.

Now, this would be pretty handy, if it wasn’t for the fact Internet Explorer completely and utterly ignores it. As a consequence, the child selector has generally only been of limited usefulness — most often used as a hack/filter which allows you to target styles specifically to non-IE browsers.

That was the state of play until a few weeks ago when Eric pointed out you can get a rough equivalent of the child selector by using a combination of rules that IE does recognize.

Let’s look at a typical situation where it comes in handy.

Eric's Universal Child Selector

Take a typical two-column layout like this.

To begin with, I (like many others) usually prefer to get all browsers ‘marching in-step’ by over-riding all their ‘factory-set’ margins and paddings. Using the universal selector (‘*’), that’s fairly effortless.

body * {margin:0 padding:0}

Of course, now all my content wll be squashed uncomfortably against the edges of my major structural DIV’s. However, solving that issue with the obvious solution — i.e. giving them ‘padding’ — requires the extra complexity of box model hacks and other nasties which I prefer to leave out. Instead if I can add ‘margin’ to the items inside my DIVs, I can duck those issues completely. Something like this might do the trick for all our main DIVs.

#content *, #nav *, #links * {margin:3px 10px 8px 10px}

This works beautifully. At least, it does until we need to place more complex markup inside our DIVs and we start to run into ‘runaway margins’. Since our universal selector has added margin to everything, each table cell, row, list item, definition list and wrapper DIV adds it’s own margin to that of the elements surrounding it, stacking up the margins and giving us a generally sucky result.

Eric's Universal Child Selector

Eric’s simple solution gives us an antidote by turning the universal selector on itself, like this:

#nav * * {margin:0}

As you can see in the example, by setting a more specific rule for ‘anything that’s two levels or more inside #nav‘, we’re able to counteract our first rule on all items below the first level (‘#links’ is unfixed for the sake of the demo). Nifty.

So, are there any side effects? Not really, although the true child selector works without having any effect at all on the elements below it — Eric’s solution means that you’re forcibly setting those elements, killing any inherited styles from higher levels of the hierachy. Not much you can do about that.

Even so, this looks pretty handy to me.


Category: other Time: 2005-06-20 Views: 1

Related post

  • How do I add additional translated items via the MediaWiki Universal Language Selector extension? 2014-11-15

    I have added some contents to the MediaWiki sidebar (MediaWiki:Sidebar). When I changed the language from English to Malayalam using the Universal Language Selector, everything in the sidebar except the newly added contents got translated. My questio

  • Creating and inserting var into jQuery Child Selector ("parent child") 2016-03-05

    I have been trying to create a variable and then insert it into Child Selector using jQuery i.e. $("parent > child") with no luck. I have included the entire applicable segment of jQuery code as reference, the overall idea is that when a navi

  • SASS child selector inside of nest 2012-06-18

    I'm using Sass (.scss) for my current project. Following example: HTML <div class="container desc"> <div class="hello> Hello World </div> </div> SCSS .container { background:red; color:white; .hello { padding-left:50

  • JQuery parent and child selectors 2016-02-13

    I have googled and searched all over this site, but cant find an answer to my question... Lets say I have the following selector $('#me').parents().eq(2).children().eq(1).children().eq(0).children().eq(0); How would I be able to turn the selected ele

  • Child selector from table 2015-05-29

    <div class="content"> <table id="Table" style="width: 100%;"> </table> </div> <button type="button" onclick="add()">Add row</button> function add() { $("#Table"

  • Modern, concise, vanilla JS check whether node has a direct child matching a selector 2016-01-27

    What's the modern, concise, and fast way to test whether a node has any child that matches a given selector? By "concise" I mean something similar to jQuery or functional-style, such as avoiding loops. I know native selectors are getting more an

  • Alternate color based on nth-child(n) selector 2016-01-28

    I have a div with alternate class name with 1 parent. <div class="parent"> <div class="head"></div> <div class="body"></div> <div class="head"></div> <div class="bod

  • Better Semantics with CSS Combinators & Selectors 2011-05-25

    I'm going to begin with a provocative claim: I believe CSS is one of the most difficult-to-master computer languages we have. It doesn't have a complex syntax and you certainly don't need a doctorate in IT to understand it. However, it's one of the o

  • CSS: When to use which selector 2014-12-12

    I've been learning HTML5/CSS3 for a month now, and I've built my first demo website. At first I was using a lot of the element selectors like: >, ,, + in combination with the type names for selecting nested tags. Now I've moved more to the id and cla

  • CSS selector - Select element that has 2009-06-18

    I would like to select the <li> element that is a parent (which immediately precedes the anchor tag, if that helps-) according to some attribute of the anchor tag. i.e. my CSS would be something like this: li < { property: value; } Obvio

  • CSS selector that matches parent of empty element? 2009-06-18

    I would like to select the <li> element that is a parent (which immediately precedes the anchor tag, if that helps-) according to some attribute of the anchor tag. i.e. my CSS would be something like this: li < { property: value; } Obvio

  • Not and first of type selector 2010-04-26

    I have a bunch of elements with a class name red: <p class="red"></p> <div class="red"></div> I can't seem to select the first element with the class="red" using the following CSS rule: .red:first-chil

  • CSS ' ' selector; what is it? 2010-12-16

    Possible Duplicate: What does ">" mean in CSS rules? I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do? --------------Solutions------------- It means immediate child

  • 5 Tips for More Efficient jQuery Selectors 2011-11-25

    As the name implies, jQuery focuses on queries. The core of the library allows you to find DOM elements using CSS selector syntax and run methods on that collection. jQuery uses native browser API methods to retrieve DOM collections. Newer browsers s

  • JavaScript Dropdown Selector 2015-04-17

    I am just getting into front-end web development and to practice, I made a dropdown selector that allows for more styling than the regular <select> element. Please let me know what I can improve on (examples are appreciated, but not necessarily need

  • How to filter/narrow XML in Perl to ignore unwanted child elements? 2016-01-21

    Say I have the following XML structure (mock) that begins: <site defaultDomain=""> <supported-locales> <locale id="sometext"/> </supported-locales> <next-child-of-site> ... </site>

  • jquery selector and setInterval 2016-01-26

    $('#start').click(function() { setInterval(fade, 1000); function fade() { $('.visible:first-child').removeClass('visible').addClass('invisible'); }; }); .invisible { visibility: hidden; } <script src="

  • Bootstrap collapse target child element 2016-01-29

    I want to use the Bootstrap collapse function, but it should collapse only the next submenu ".menu-lvl2". Using IDs is not possible, the menu is generated code. This is the current code, but on click it opens and closes both submenus. So the hre

  • CSS Selector - how to select the first and last div 2016-02-05

    I am having trouble selecting the first and last div for the following html markup: <div class="layout__side"> <div class="portlet-dropzone"> <div id="id1"> <span></span> <div class="port

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.251 (s). 13 q(s)