CSS3: From Knowledgable to Ninja – Part 1 Selectors, UI Selectors

UI pseudo-classes

:enabled and :disabled
These pseudo-classes can be great for form usability, enabling and disabling form elements based on what the visitor has already filled out.

Target the element when it has been checked i.e. radio button and checkboxes.

input[type=checkbox]:checked + label {color:red;}
  <input type="checkbox" id="test1ck">
  <label for="test1ck">Check and Uncheck Me</label>

Form related UI pseudo-classes

All of the following pseudo-classes should be self explanatory :)

:valid and :invalid
:required and :optional
:in-range and :out-of-range
:read-only and :read-write

  <input type="number" min="5" max="7" id="test3ck" required="required">
  <label for="test3ck">Number between 5 and 7</label>
<input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck"> <label for="test4ck">Hexidecimal color</label> </div>‚Äč

View the demo (currently best viewed in Chrome)

CSS3: From Knowledgable to Ninja – Part 1 Selectors, Attribute Selectors

Older Attribute Selectors

Element E that has the attribute attr with any value.

img[alt] {}
  <img src="image.jpg" alt="accessible" title="accessible">

form[type] {} 
  <input type="date">

Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.

img[src="small.gif"] {}
  <img src="small.gif" alt="small">

input[type="text"] {}
  <input name="firstname" type="text">

Element E whose attribute attr has a value val or begins with val- (“val” plus “-“).

p[lang|="en"] {}
  <p lang="en-uk">This paragraph is set to en-uk</p>

img[title|="small"] {}
  <img src="small.gif" title="small-thumbnail">

Element E whose attribute attr has within its value the space-separated full word val.

a[title~=more] {}
  <a href="#" title="want more info about this?">more ></a>

CSS3 Attribute Selectors

Element E whose attribute attr starts with the value val.

a[href^=mailto] {background-image:url(emailicon.gif);}
  <a href="mailto:example@example">example@example.com</a>

Element E whose attribute attr ends in val.

a[href$=pdf] {background-image:url('pdficon.gif');}
  <a href="flyer.pdf">Information Flyer</a>

Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

NOTE: You can use multiple attributes!! e.g. a[title][href] {}

CSS3: From Knowledgable to Ninja – Part 1 Selectors, Relational Selectors

ul li descendant selector
You all know about the descendant selector which targets all the nested <li>s

ol > li child selector
This also should be something you’re familiar with, this will match <li>s in <ol> but not the nested <ul>

li.myClass + li adjacent sibling
Targets the <li> that immediately follows <li>

li.myClass ~ li general sibling selector
Heres a new one I havent seen before, it matches later siblings, but not nested. (works in IE7+)

Elaine’s jQuery Lessons: Part 2

For the BEIM NZ Fire project there’s a rather large form that needed styling, this form has sections where you can click a button and add a new row of input elements, each row has a link for them to delete the row if they make a mistake.

Originally the code was structured as a list item, clicking on ‘add new’ would simply add a new list item and clicking on delete would just delete the entire list item.

Here’s the original code for the Delete link

<a href="javascript:void()" onclick="$(this).parent().remove();">Delete</a>

So what this is saying is, when you click on this element, go to its parent and remove it. So in this case the link was sitting inside the <li> so it removed the list item and whatever was sitting inside of it.

I needed to refactor the code from a list item into a table so clicking on this link no longer worked. The input element and the delete link were in separate table cells so clicking on this link would remove the cell the link was sitting inside of.

I needed it to traverse up the tree and remove the whole table row so I did some research, then came across .closest() and its description was: Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree. Perfect, just what I needed.

<a href="javascript:void()" onclick="$(this).closest('tr').remove();">Delete</a>

So after a bit of tweaking, here is the code I came up with. Here’s an explanation: When you click on this item, find the closest table row (beginning at the current element and progressing up the tree) and remove it.

Again, like my previous post, there was little change on my behalf but it was still frustrating trying to look for something I didn’t know existed, I knew what I wanted it to do, but finding a solution was hard because I’m not aware of most of the jQuery selectors.

This little jQuery snippet wasn’t something I was asked to do, I knew the link no longer worked and I wanted to challenge myself to see if I could fix it on my own, I’m glad I gave it a shot and I’m always finding jQuery opportunities whenever possible.

Elaine’s jQuery Lessons: Part 1

Since I’m new to jQuery I thought this would be a good place to pop down my progress in learning jQuery.

So far I’ve spent a little time reading “jQuery: From Novice to Ninja” which is a fantastic book, its easy to read and simple to follow, highly recommend you guys to check this eBook.

I did a small amount of jQuery for ProCare, the search box had default text that needed styling (italic, light grey), but when a user clicks into the box and starts typing it would revert to normal body copy text.

Here’s a look at the original code piece by piece:

var searchBox = '#ctl00_plcUpperRightNav_CMSSearchDialog1_txtWord'

Simple enough, find this ID and we’ll reference this as searchBox later on.

$(searchBox).val('Enter Keyword');

Give this search box the value of Enter Keyword.

$(searchBox).blur(function() {
  if($(searchBox).val() === '') {
    $(searchBox).val('Enter Keyword');

I thought blur had something to do with focus, turns out its when it loses focus, either by tabbing or clicking away. Basically this peice is saying when the search box loses focus do the following: if its empty then add Enter Keyword value.

$(searchBox).focus(function() {       
  if($(searchBox).val() === 'Enter Keyword') {

This last piece is pretty much the opposite, when the search box gets focus and the value is Enter Keyword then make the value blank.

I already had my style set up for the Enter Keyword default text, I just needed to append it via jQuery, so here what I did:

$(searchBox).val('Enter Keyword').addClass("prompt");

Search box has the value Enter Keyword and the class ‘prompt’ which gives it the light grey and italic.

$(searchBox).blur(function() {<       
  if($(searchBox).val() === '') {
    $(searchBox).val('Enter Keyword').addClass("prompt");

Again, when it loses focus and its still has the default text then append the 'prompt' class to it.

$(searchBox).focus(function() {
  if($(searchBox).val() === 'Enter Keyword') {

Remove the 'prompt' class from the search box so its ready for typing into.

Although this looks incredibly simple and doesn't look like much was done on my part, it still took me a while to get my head around the original code and where to add the class and remove it.

I think jQuery is awesome, powerful and quite easy to understand once you get the hang of it. It's just one of those things you need to do on a regular basis so you don't forget how to code.

I'll be adding more of these jQuery learning snippets to the blog, its mainly for my reference, so that I can come back here after a year and laugh see how far I've come.

HTML/CSS/JavaScript Online Editors

I read a lot of blogs and tutorials and I always see something really cool that I want to try myself on my local machine, but it becomes a pain having to set up an HTML document and stylesheet just because I want to test or experiment with something.

Those of you may have heard of online editors such as JSFiddle and CSSDesk. They’re both respectable and popular online editors, JSFiddle in particular is pretty good, they’ve got the ability to register for an account and you can save your ‘fiddles’ and they have access to a couple of frameworks like Mootools and jQuery.

A new ones recently been released by a woman called Lea Verou, you may have heard of her, shes a Front End Developer and shes all about CSS3, shes got a bunch of really cool experimental CSS3 libraries on her site, but enough about her shes very recently released her own and its called dabblet.

Its so new at the moment it may be a little buggy, but here’s her blog post on why she released one and how its different.

Its probably something worth bookmarking for now as it’ll eventually get better, so far I think its pretty handy and lightweight. and I like its simplicity.