Category Archives: CSS3: From Knowledgable to Ninja

CSS3: From Knowledgable to Ninja – Part 4 Media Queries

If you’ve ever used a print stylesheet you’ll be familiar with the idea of creating a separate stylesheet to come into play under certain conditions. in CSS2 there were media types, which lets you specify a type of media to target.

<link rel='stylesheet' type='text/css' media='screen' href='css/styles.css' />
<link rel='stylesheet' type='text/css' media='print' href='css/print.css' />
 
@media screen {
  p {font-family:sans-serif;}
}
@media print {
  p {font-family:serif;}
}

CSS3 Media Queries

In CSS3 they extend the idea but instead of targeting a media type they target the capability of the device. Such things it can target are:

  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution

creating and linking to a separate stylesheet

@media screen and (max-device-width:480px) {
  #wrapContent {width:400px;}
}

This style targets screen devices that have a max width of 480px (i.e. iPhones) to make #wrapContent 400px wide. for this to work we would need to place this at the end of our stylesheet so it will overwrite any styles we’ve set up for the browser.

If you’re going to have a lot more styles and want to use a separate stylesheet you can use the following.

<link rel='stylesheet' type='text/css' media='only screen and (max-width: 480px)' href='smartphone.css' />

CSS3: From Knowledgable to Ninja – Part 3 Generated Content

before and after

::before and ::after
before and after are pseudo-elements, essentially you get two free stylable faux elements for every non-empty element.

 
p:before {content:"before content - "; font-weight:bold;}
p:after {content:" - after content"; font-weight:bold;}

<p>the content</p>

before content - the content - after content

syntax

element:before {content:”REQUIRED”;}

Although the content declaration is required, the value can be empty. Below are the values the content declaration accepts.

 
element:before {
  content:'';                    /* empty */
  content:" (.pdf) ";            /* any text */
  content:"\2603";               /* unicode */
  content:" (" attr(href) ")";   /* attributes */
  content:counter(name);
  counter-increment:name;        /* counters */
}

special characters

Copy Paste Character is one example website with lots of characters you can copy, add this with an Entity Conversion Calculator and you’ve got the tools needed to make some generated content.

View the demo

attribute values

You could use this in the print style sheet, generating the URL for all links.

a[href^=http]:after {content:attr(href);}

There are a lot of clever ways you can use generated content. Some of the use cases I’ve seen are quote, speech bubbles and tooltips.

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+)