CSS Building Blocks - Scott Grannemanfiles.granneman.com/presentations/css/CSSSelectorsSlides.pdfSelectors Level 3 W3C Recommendation 29 September 2011 TR/css3-selectors/ 4

© 2005-2012 R. Scott GrannemanLast updated 20120120

You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.

Washington University in St. LouisR. Scott Granneman

[email protected]

SelectorsCSS Building Blocks

1

What’s a selector?It identifies objects on a web page

to which you wish to applyCSS declarations

2

How Many?

3

Selectors Level 3W3C Recommendation

29 September 2011http://www.w3.org/TR/css3-selectors/

4

5

5

6

6

CSS 1 & 2

7

19 selectors in CSS 1 & 2

8

CSS 3

9

Under developmentsince December 15, 2005

10

Not one large single specInstead, divided into

many separate documentscalled modules

11

Currently 50+ modules!Different modules

have different statuses

12

13

13

13

13

Which modules have reachedW3C Recommendation status?

3 in 2011! Selectors (19 new ones!)

! Namespaces! Color

14

Others have reachedW3C Candidate Recommendation

status! Backgrounds & Colors

! Media Queries! Multi-Column Layout

15

We’ll cover CSS 3 only a little bit

16

The W3C categorizes CSS selectors,but I like the way that WestCiv

(makers of StyleMaster& fine CSS tutorials)

categorize them,so we’re using their method

For details, see:http://www.westciv.com/style_master/academy/css_tutorial/selectors/

17

Web BrowserEngines

18

Rendering Engine Name BrowsersBrowsers

Trident

Gecko

WebKit

Presto

19

mshtml.dll

– 4.0.x– 5.0.x– 5.5.x– 6.0.x

3.1 7.04 8.0.x5 9.0.x6 10.0.x

45

5.56789

10

20

1.71.8

1.8.11.9

1.9.11.9.2

25

1 6 61.5 7 72 8 83 9 9

3.53.645

21

85100412522

530.17533.16

11.12345

522.11.3526.12.2533.16

345

22

533534.3534.7

534.10534.13534.16534.24534.30535.1

5 535.1 146 535.2 157 535.7 168 535.11 179 535.16 18

10111213

23

12

2.12.1.1

2.2.152.5.242.6.302.7.62

7 2.8.131 11.19 2.9.168 11.5

9.5 2.9.201 11.69.6 ? 12

10.0-110.510.611

24

TypeSelectors

25

AKA HTML Element Selectors

26

HTML elements as selectors:p {}h1 {}ul {}

table {}

27

Used when you want to affectevery instance of an element

Example:p { color: red; font-weight: bold;}

Result: text in every ...is red & bold

28

Rendering Engine Support

4+

1+

85+

1+

29

ClassSelectors

30

Define a class in CSS:.emphasis {}.bookTitle {}

Apply it in HTML:...

...

31

2 kinds of class selectors! Solitary class selectors! Element class selectors

32

Solitary class selectorscan be applied

to any HTML element.emphasis {}

33

Element class selectorscan only be used

with specific HTML elementp.emphasis {}a.emphasis {}

34

A class can be appliedas many times on a page

as you wish

<a class="emphasis">

... all on the same page

35

" #a-z Space

A-Z Starting with #

0-9 Starting with -

-

_

Rules for CSS class names

36

Class names should reflect function,not appearance

Good Bad

.emphasis .bold

.bookTitle .italic

.footer .bigRed

.center

37

Multiple words in a class name?These are all OK

.maincontentnav.mainContentNav.MainContentNav

Just be consistent!

38


7+

1+

85+

1+

39

ID Selectors

40

Define an ID in CSS:#navigation {}#utilityNav {}

Apply it in HTML:<div id="navigation">...</div>...

41

2 kinds of ID selectors! Solitary ID selectors! Element ID selectors

42

Solitary ID selectorscan be applied to any HTML element

#navigation {}

43

Element ID selectorscan only be used

with specific HTML elementdiv#navigation {}p#utilityNav {}

44

An ID can be appliedonly once per page

Not once per site – once per page<div id="navigation">

45

" #a-z Space

A-Z Starting with #

0-9 Starting with -

-

_

Rules for CSS ID names

46

ID names should reflect function,not appearance

Good Bad

#navigation #right

#utilityNav #narrow

#footer #bottom

47

Multiple words in a ID name?These are all OK

#maincontentnav#mainContentNav#MainContentNav

Just be consistent!

48

You’re probably going to use IDsa lot

when we get to CSS positioning

49


4+

1+

85+

1+

50

DescendentSelectors

51

Used to be calledContextual Selectorsbefore renaming to

Descendant Selectors

52

Selects an objectwhen it is the descendant

(child, grandchild,great grandchild, etc.)

of another objectNot necessarily the immediate child,

although that works,but any descendant

ul li {}ul li a {}

p.intro a {}

53

CSS:ul li {}ul li a {}p.intro a {}p img {}

54

CSS:p.intro a {}p img {}

HTML: ... <a> ... </

a> ... 

 ... <a> ... </a> ... 

 ... <a><img> ... </img></a> ... 

55

You can often usea descendant selector

instead of a class

56

Given this HTML: ... <img class="headshot"

src="..."> ... 

Instead of this CSS:.headshot {}

You could use this CSS:p img {}

And this HTML: ... <img src="..."> ... 

57


4+

1+

85+

1+

58

LinkPseudo Class

Selectors59

Links have 4 different states:! Normal (an unvisited link)

! Visited! Hover (mouse cursor is over link)! Active (moment of being clicked)

60

CSS:a:link

a:visiteda:hovera:active

Combine withelement class selectors:

a.offsite:hover {}

61

Some of the 4 link statesare mutually exclusive

(can’t be visited & unvisitedat the same time)& some are not

(can be both visited & activeat the same time)

62

If CSS rules contradict,the last one wins

Specify your rules in this order:a {}

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

63


3+

1+

85+

1+

a:link

64


3+

1+

85+

1+

a:visited

65


3+

1+

85+

1+

a:hover

66


3+

1+

85+

1+

a:active

67

PseudoElementSelectors

68

:first-line:first-letter

&:before:after

69

:first-line

Selects 1st lineof a block-level element

& can only be usedwith certain properties

p:first-line {}

70

:first-letter

Selects 1st letterof a block-level element

& can only be usedwith certain properties

p:first-letter

Often used to createa “drop cap” effect

71

:before

Selects element& inserts content

(text, images, counters, etc.)before it

72

:after

Selects element& inserts content

(text, images, counters, etc.)after it

73

CSSh1:before {content:"Chapter: ";}

HTML<h1>1</h1>

User seesChapter: 1

74

CSSa.flight:after {content:"http://

www.example.com/plane.gif";}

HTML<a class="flight" href="http://www.expedia.com">Expedia</a>

User seesExpedia $

75

CSSa:after {content: attr(href)}

HTML<a href="http://www.domain.com">Link

to site</a>

User seesLink to site http://www.domain.com

76


mshtml 5.5+*

1+

85+*

1+

:first-line

77

IE 8Rules with !important

are ignored inside :first-line

78

text-transformproperty doesn’t work

79


mshtml 5.5+*

1+

85+

1+

:first-letter

80

IE 6Combining :first-letter rules

with othersmay be problematic

IE 8Rules with !important

are ignored inside :first-letter

81


8+

1.9.1+

85+*

1+

:before

82

Some styles can’t be appliedto :before,

such as animations & transitions

83


8+

1.9.1+

85+*

1+

:after

84

Some styles can’t be appliedto :after,

such as animations & transitions

85

SelectorGroups

86

Allows you to applythe same declarations

to several selectors at oncep, input, blockquote, td {font-

family:"Times New Roman";}

a:link, a:visited, a:active, a:hover {background-color:#ffff00;}

87


4+*

1+

85+

1+

88

IE 8If IE doesn’t support

one of the grouped selectors,ALL of them fail!

89

UniversalSelectors

90

* {font-family: Verdana, sans-serif;}

* matchesevery (appropriate) HTML element

91

Instead of thisp, blockquote, td, option { font-family: Verdana, Arial, sans-serif; font-size: 12px;}

Use this* { font-family: Verdana, Arial, sans-serif; font-size: 12px;}

92

The Global White Space Reset* { margin: 0; padding: 0;}

93


7+

1+

85+

1+

94

DynamicPseudo Class

Selectors95

:hover & :active can be appliedto any element,

not just <a>Also added :focus

96

:hover (user’s mouse cursoris over element)

:active (form element at momentof being clicked)

:focus (form elementwhen keyboard’s cursor in or on it)

p:hover {}input:active {}

textarea:focus {}p.intro:hover {}

97


7+

1+

419.3+

1+

:hover

98


8+

1+

85+

1+

:active

99


8+

1+

85+

1+

:focus

100

LanguageSelectors

101

Select elementsbased on language encoding

Every language hasa 2-letter encoding

+ a dash& 2 more letters for dialects

102

fr = Frenchzh = Chineseen = English

en-US = American EnglishHTML



103

Different languagesuse different formatting

Bold & italic,indenting,

quotation marks,etc.

To use with CSS:cite:lang(fr) {}

blockquote.literature:lang(zh) {}

104


8+

1.2+

525+

1+

105

ChildSelectors

106

Descendant selectors work for bothdirect children & any descendants,

no matter how deepThe child selector works only

for direct children,not grandchildren

or any other descendantsdiv>p {}

div>div {}

107


7+

1+

85+

1+

108

First ChildSelectors

109

The child selector worksonly if the element

is the 1st child of a parentp:first-child {}

means the first of any parent element,not the first child of 

110


7+

1+

85+

1+

111

AdjacentSelectors

112

Selects siblings:2 or more elements

that are at the same level2nd element is selected, not both!

Elements must be listedin the order

in which they appear in HTMLh1 + h2 {margin-top:-20px;}img + p {margin:auto; text-align:center; width:70%;}

113


7+

1+

85+

1+

114

AttributeSelectors

115

Allows you to selecta particular element

based on 1 of 4 attribute conditions

116

(1) Does element foohave attribute bar?

This CSS:a[title] {}

matches this HTML:<a href="http://www.domain.com"

title="Stuff">

It doesn’t matter what the title is,just that it has a title.

117

(2) Does element foohave a specific attribute value bar?

This CSS:a[title="Balloon"] {}


title="Balloon">

but not this HTML:<a href="http://www.domain.com"

title="Red Balloon">

118

(3) Does element foo have a specific attribute value bar among a list of

space separated values?This CSS:

a[title~="Balloon"] {}


title="Red Balloon">

and this HTML:<a href="http://www.domain.com"

title="Blue Balloon">119

(4) Does element foo have a specific attribute value bar among a list of

hyphen separated values?This CSS:

a[lang|="en"] {}


lang="en-US">

and this HTML:<a href="http://www.domain.com"

lang="en-UK">120


7+*

1+

85+

1+

x[attr]

121

Matches every td & th in tablewhen attribute is colspan

(regardless of whethercolspan is used!)

122


7+

1+

85+

1+

x[attr=“value”]

123


7+

1+

85+

1+

x[attr~=“value”]

124


7+

1+

85+

1+

x[attr|=“value”]

125

Sources

126

QuirksModeCompatibility Master Table

www.quirksmode.org/compatibility.html

127

Western CivilisationComplete CSS Guide:Selectors introduction

www.westciv.com/style_master/academy/css_tutorial/selectors/

128

Comparison of layout engines(Cascading Style Sheets)

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_

(Cascading_Style_Sheets)

129

CSS Compatibilityand Internet Explorer

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

130

Thank you!

Email: [email protected]: www.granneman.com

Publications: www.granneman.com/pubsBlog: blog.granneman.comTwitter: scottgranneman

131

© 2005-2012 R. Scott GrannemanLast updated 20120120

You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.

Washington University in St. LouisR. Scott Granneman

[email protected]

SelectorsCSS Building Blocks

132

Licensing of this workThis work is licensed under the Creative Commons Attribution-ShareAlike License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.

In addition to the rights and restrictions common to all Creative Commons licenses, the Attribution-ShareAlike License features the following key conditions:

Attribution. The licensor permits others to copy, distribute, display, and perform the work. In return, licensees must give the original author credit.

Share Alike. The licensor permits others to distribute derivative works under a license identical to the one that governs the licensor’s work.

Questions? Email [email protected]

133

CSS Building Blocks - Scott Grannemanfiles.granneman.com/presentations/css/CSSSelectorsSlides.pdfSelectors Level 3 W3C Recommendation 29 September 2011 TR/css3-selectors/ 4

Documents