CSS3 &

SELECTORS

RACHEL ANDREW

@rachelandrew

rachelandrew.co.ukedgeofmyseat.com

grabaperch.com

WHAT IS

CSS3?

CSS3 IS THE NEXT VERSION

OF CSS

CSS3 IS

MODULAR

SOME CSS3 MODULES ARE MORE COMPLETE

THAN OTHERS

W3C MATURITY LEVELS

Working DraftCandidate RecommendationProposed RecommendationW3C Recommendation

http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels

CSS3 IS SUPPORTED BY BROWSERS

Some browsers and some (parts of) modules.

USING CSS3

SELECTORS MODULE

W3C Proposed Recommendationhttp://www.w3.org/TR/css3-selectors/

h1 {}

p {}

.thing {}

#uniquething {}

.thing p

BASIC SELECTORS

THE PROBLEM

WITH CSS2 SELECTORS

<h1>My heading</h1><p class=”first”> ... </p><p> ... </p>

ADDING CLASSES

CSS3 SELECTORS

“Common sense” new selectorstarget elements more precisely without adding

classes

STRUCTURAL PSEUDO-CLASS SELECTORS

a:link {}a:visited {}

PSEUDO-CLASS

SELECTORS

a:hover {}a:active {}

DYNAMIC

PSEUDO-CLASS

:first-child

target an element when it is the first child of a parent element

:first-child

div#wrapper p {! ! font-size: 1.5em;}

:first-child

div#wrapper p:first-child {! ! font-size: 1.5em;}

:first-child

:first-child

:last-child

target an element when it is the last child of a parent element

:last-child

ul#navigation li:last-child {! ! border-bottom: none;}

:last-child

:last-child

:nth-child

select multiple elements according to their position in the document tree

:nth-child

tr:nth-child(odd) td {! ! background-color: #f0e9c5;}

:nth-child

:nth-child

tr:nth-child(3) td {! ! background-color: #f0e9c5;}

:nth-child

:nth-child

tr:nth-child(2n+1) td {! ! background-color: #f0e9c5;}

:nth-child

http://reference.sitepoint.com/css/understandingnthchildexpressions

:nth-of-type

select multiple elements according to their position in the document tree BUT only those

elements that are the same as the type the rule is applied to.

p:nth-of-type(odd) {! ! background-color: #f0e9c5;}

:nth-of-type

:nth-of-type

:only-child

matches an element if it is the only child element of it’s parent.

li {! list-style-type: disc;}!li:only-child {! list-style-type: none;}

:only-child

:only-child

:empty

matches an element if it is empty

p {! padding: 0 0 1em 0;! margin: 0;}!p:empty {! padding: 0;}

:empty

FOR INPUT ELEMENTS

Structural pseudo-classes for use with forms.

:checked

the checked state of a checkbox or radio button

#agreeterms:checked {border:2px solid blue;

}

:checked

ENABLED AND DISABLED

detecting input element states

input:enabled {color: #000;

}

:enabled

input:disabled {color: #999;

}

:disabled

THE NEGATION PSEUDO-CLASS

:not(selector)

<p> ... </p><p class=”box”> ... </p><p> ... </p>

:not

p:not(.box) {! padding: 0 0 3em 0;! margin: 0;}!p.box {! border:1px solid #000;! margin: 0 0 2em 0;}

:not

:not

PSEUDO-ELEMENTS

:first-letter

the first character of the first line of text

div#wrapper:first-letter {! font-size: 200%;! font-weight: bold;! color: red;}

:first-letter

:first-letter

:first-line

the first formatted line of text

div#wrapper:first-line {! font-size: 200%;! font-weight: bold;! color: red;}

:first-line

:first-line

:before

Render content before the element when using generated content

<div id=”content”> ... </div>

:before

#content:before { content: "Start here:";}

:before

:before

:after

Render content after the element when using generated content

#content:after { content: "End here:";}

:after

::selection

Content selected in browser by the user

div#wrapper p::selection {!background-color: red;

}

::selection

::selection

COMBINATORS

Combining selectors to target elements

DESCENDANT SELECTOR

Select all elements that are descendants of a specified parent

div#wrapper p {! font-size: 1.5em;}

DESCENDANT SELECTOR

CHILD SELECTOR

Select all elements that are immediate children of a specified parent

<ul><li>Item 1 <ol>

<li>Sub list item 1</li> <li>Sub list item 2</li> </ol> </li><li>Item 2</li>

</ul>

CHILD SELECTOR

li {! color: #000;}!ul > li {! color: red;}

CHILD SELECTOR

Child Selector

ADJACENT SIBLING

Select elements that are the adjacent siblings of an element

div#wrapper h1 + p {! font-size: 1.5em;}

ADJACENT SIBLING

Adjacent Sibling

GENERAL SIBLING

Select elements that are the siblings of an element

div#wrapper h2~p {! color: red;}

GENERAL SIBLING

General Sibling

ATTRIBUTE SELECTORS

Select elements based on attributes

form input[type="text"] {

}!form input[type="submit"] { }

ATTRIBUTE SELECTORS

Attribute Selectors

label[for="fContact"] { ! float: none; ! width: auto;}

ATTRIBUTE SELECTORS

a[href ^="mailto:"] {! ! padding-right: 20px;! ! background-image:url(email.png);! ! background-repeat: no-repeat;! ! background-position: right center;}

ATTRIBUTE SELECTORS

BROWSER

SUPPORT

Browser Support

DOES IT

MATTER?

YES, IT

MATTERS.

JAVASCRIPT

Plug the holes in browser support using JavaScript.

div#wrapper p:first-child,div#wrapper p.first {! ! font-size: 1.5em;}

JQUERY: FIRST-CHILD

<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("div#wrapper p:first-child").addClass("first"); });</script>

ul#navigation li:last-child, ul#navigation li.last {! ! border-bottom: none;}

JQUERY: LAST-CHILD

<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("ul#navigation li:last-child").addClass("last"); });</script>

tr:nth-child(odd) td, td.odd {! background-color: #f0e9c5;}

JQUERY: NTH-CHILD

<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(document).ready(function(){! $("tr:nth-child(odd) td").addClass("odd"); });</script>

CSS “POLYFILLS”

plugging the holes in support

WHAT IS A POLYFILL?

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

http://remysharp.com/2010/10/08/what-is-a-polyfill/

SELECTIVIZR

http://selectivizr.com/

ECSSTENDER

http://ecsstender.org/

CSS3 WORKFLOW

How I approach my projects.

CSS3 WORKFLOW

Develop without any polyfill or JavaScript fixes in place.

CSS3 WORKFLOW

Validate.

CSS3 WORKFLOW

Test & Fix in older browsers

CSS3 WORKFLOW

Decide if you need to use a polyfill and which kind

CSS3 WORKFLOW

Test again.

THANK YOU!

@rachelandrew

rachelandrew.co.ukedgeofmyseat.com

grabaperch.com