mastering css3 selectors

hello.

Friday, 15 October 2010

Rachel Andrew

@rachelandrew

rachelandrew.co.ukedgeofmyseat.comgrabaperch.com

Mastering CSS3

SelectorsFriday, 15 October 2010

CSS3 is the next version of CSS

CSS3 is Modular

Some CSS3 modules are more complete

than others

W3C Maturity LevelsWorking 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/

.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 selectors

target elements more precisely without adding classes

Structural pseudo-class selectors

a:link {}a:visited {}a:hover {}a:active {}

: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

: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

: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

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

: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

: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

: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:not(.box) {! padding: 0 0 3em 0;! margin: 0;}!p.box {! border:1px solid #000;! margin: 0 0 2em 0;}

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

the first formatted line of text

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

:first-line

:before

Render content before the element when using generated content

:before

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

: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

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

Child Selector

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

Child Selector

Adjacent Sibling

Select elements that are the adjacent siblings of an element

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

Adjacent Sibling

General Sibling

Select elements that are the siblings of an element

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

General Sibling

Attribute Selectors

Select elements based on attributes

form input[type="text"] {

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

Attribute Selectors

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

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

Attribute Selectors

Browser Support

Does it matter?

Yes, it matters.

Vendor-specific extensions

Implementing early stage CSS3

border-radius

.box {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;

border-radius

In defence of vendor-specific extensions

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

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

jQuery: last-child

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

jQuery: nth-child

Scripts that “fix IE”

http://www.keithclark.co.uk/labs/ie-css3/http://ecsstender.org

Thank you.

mastering css3 selectors

child element

nthchild tr

child div

child ul

type p

wrapper p

nthchildodd td

nthchild3 td

Technology

15 css selectors

oocss & progressive css3 selectors

pseudo css selectors

css3 selectors

mastering css3

sensors, mode selectors, accessories

1 introduction to css3 - denise...

the evolution of selectors

workshop - oclctoday’s agenda • what is css3? •...

html5 - css nite in sapporo · html5 & css3 svg 385 top ads...

collection dashboards for selectors

ww3 - crew selectors (2016)

css selectors

css - selectors

05 selectors

20480 - programming in html5 with javascript and · 3. css3...

simplifying css selectors

#4 - css selectors, css3 and web typography

selectors - everel

css3   