Christian Ziebarth

CSS :only-child Example

In Uncategorized on November 4, 2013 at 11:54 pm

There’s a CSS3 pseudo-class out there called :only-child that I didn’t think I would ever need to use. The Mozilla Developer Network says it, “represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.”

When working recently on an overhaul of, however, I did find a need to use this pseudo-class. In the Company pages there are various tables of information. When the table uses just one row in the THEAD that row gets a powder blue background color. But when there are two rows in the THEAD the first row gets a lighter shade of background color while the second row gets the same color that a row will get if it’s the only child in a THEAD. The only way to get the only header row in one instance and the second header row in another instance to match, without resorting to class names or deprecated HTML, was to use the :only-child pseudo-class, like so:

  1. THEAD TR:nth-child(even),
  2. THEAD TR:only-child
  3. {
  4.   background-color: #CCE5FF;
  5. }

And here’s the CodePen I created to showcase the effect:

Instant jQuery Selectors by Packt

In Uncategorized on November 4, 2013 at 10:49 pm

Instant jQuery Selectors

Just finished reading a review copy of Instant jQuery Selectors by Packt Publishing and written by Aurelio de Rosa, a guy whose name I’ve seen around in a lot of web development articles recently. One of the things that initially turned me on to using jQuery was its CSS-like selectors. That made it very easy to quickly start programming more interactivity into my sites when I was coming from more of an HTML/CSS background and less of a JavaScript background.


In Uncategorized on September 23, 2013 at 7:55 pm

In all my years of web development I haven’t authored a book on web development (yet) but I did recently act as a technical reviewer on a book. The book is published by Packt Publishing and is called “Building Impressive Presentations with Impress.js,” and it’s all about how you can use the impress.js plugin to easily create three-dimensional presentations with far more effects than traditional left-right sliders.

Shortly after I received my copy I was asked to lecture on HTML5 for the OC Dev Meetup group so I quickly made an accompanying impress.js presentation for it that can be seen here.