Monthly Archives: February 2012

CSS3: From Knowledgable to Ninja – Part 1 Selectors, Pseudo Elements

Pseudo-classes select elements that already exist, pseudo-elements create ‘faux’ elements you can style. Pseudo-elements also use the double colon, this was introduced to distinguish the difference between puseudo-classes and pseudo-elements. all browsers recognise the single colon and I believe IE ignores the double colon, so its probably safter to use the single colon.

first letter and first line

::first-letter and ::first-line
Target the first letter/line of the specified selector.

p::first-letter {}
  <p>The first letter will look like a drop cap and this line will be styled</p>

selection

::selection

If you’ve ever used the HTML5 Boilerplate you may be familiar with this one, this pseudo-element lets you style the selection you make. By default on most browsers if you highlight something it’ll turn blue and the text colour will be white, Paul Irish one of the creators of the HTML5 Boilerplate has set his to a hot pink, so if you ever jump onto a site and see a hot pink highlight, chances are they’re using his boilerplate :D

*::selection {color:background-color; color:black;}
  <p>highlight anything and I'll be pink!</p>

before and after

::before and ::after
You can style the generated content with the ::before and ::after pseudo-elements. The ‘content’ property specifies what is inserted. I’ll talk more about these two pseudo-elements in the Generated Content post.

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

Structural selectors target elements based on their relationships to other elements in the DOM. They update dynamically if the page updates and they reduce the need for extra markup, classes and IDs.

First, last, & only

:first-child and :last-child
Target the first child/last child of its parent.

:first-of-type and :last-of-type and
Target the first/last of this type from its parent.

:only-child and :only-of-type
Target the element provided its the only/of-type element of its parent.

Its a lot easier to explain by playing with the demo, try all the selectors and try targeting the h2 and h3.

View the demo

nth pseudo-classes

:nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n)

The argument, n, can be a keyword, a number, or a number expression of the form an+b.

The keywords it accepts are odd and even – targetting odd or even-numbered elements.

When a number is entered into the argument for example 5 it will target the fifth element.

The argument n can also be given as an+b, where a and b are integers (for example, 3n+1).

In that expression the number b represents the position of the first element that we want to match (in this case the first position). the number a represents every element we want to match after that (in this case every third element after the first) so it will target the first, fourth, seventh and tenth.

View the demo

empty pseudo-class

:empty

The empty pseudo class targets elements that have no children at all.

<p></p>

<p> <!-- this is a comment --> </p>

<table>
  <tr>
    <td></td>
  </tr>
</table>

This can be useful for styling empty table cells, you could give them a greyed out look.

negation pseudo-class

:not(n)

Match all elements that do not match whats inbetween the parenthesis

li:not(.myClass) {color:red;}
  <ul>
    <li>one</li>
      <li class="myClass">two</li>
    <li>three</li>
  </ul>

target pseudo-class

:target

Target is used in conjunction with IDs and are matched when the current URL matches the ID.

#about:target {}
  <a href="#about>About Us</a>

A great example would be to make a tabbed area, where the tabs link to hash tags and you could style the target tab to look like the active tab.

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.

:checked
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
:default

<div>
  <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

E[attr]
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">

E[attr=”val”]
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">

E[attr|=val]
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">

E[attr~=val]
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

E[attr^=val]
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>

E[attr$=val]
Element E whose attribute attr ends in val.

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

E[attr*=val]
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.