css selectors (handouts) - scott...

© 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

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

to which you wish to applyCSS declarations

How Many?

1

2

3

Selectors Level 3W3C Recommendation

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

4

5

5

CSS 1 & 2

6

6

7

19 selectors in CSS 1 & 2

CSS 3

Under developmentsince December 15, 2005

8

9

10

Not one large single specInstead, divided into

many separate documentscalled modules

Currently 50+ modules!Different modules

have different statuses

11

12

13

13

13

13

Which modules have reachedW3C Recommendation status?

3 in 2011! Selectors (19 new ones!)

! Namespaces! Color

Others have reachedW3C Candidate Recommendation

status! Backgrounds & Colors

! Media Queries! Multi-Column Layout

We’ll cover CSS 3 only a little bit

14

15

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/

Web BrowserEngines

Rendering Engine Name BrowsersBrowsers

Trident

Gecko

WebKit

Presto

17

18

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

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

85100412522

530.17533.16

11.12345

522.11.3526.12.2533.16

345

20

21

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

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

TypeSelectors

23

24

25

AKA HTML Element Selectors

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

table {}

Used when you want to affectevery instance of an element

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

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

26

27

28

Rendering Engine Support

4+

1+

85+

1+

ClassSelectors

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

Apply it in HTML:...

...

29

30

31

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

Solitary class selectorscan be applied

to any HTML element.emphasis {}

Element class selectorscan only be used

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

32

33

34

A class can be appliedas many times on a page

as you wish

<a class="emphasis">

... all on the same page

" #a-z Space

A-Z Starting with #

0-9 Starting with -

-

_

Rules for CSS class names

Class names should reflect function,not appearance

Good Bad

.emphasis .bold

.bookTitle .italic

.footer .bigRed

.center

35

36

37

Multiple words in a class name?These are all OK

.maincontentnav.mainContentNav.MainContentNav

Just be consistent!


7+

1+

85+

1+

ID Selectors

38

39

40

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

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

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

Solitary ID selectorscan be applied to any HTML element

#navigation {}

41

42

43

Element ID selectorscan only be used

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

An ID can be appliedonly once per page

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

" #a-z Space

A-Z Starting with #

0-9 Starting with -

-

_

Rules for CSS ID names

44

45

46

ID names should reflect function,not appearance

Good Bad

#navigation #right

#utilityNav #narrow

#footer #bottom

Multiple words in a ID name?These are all OK

#maincontentnav#mainContentNav#MainContentNav

Just be consistent!

You’re probably going to use IDsa lot

when we get to CSS positioning

47

48

49


4+

1+

85+

1+

DescendentSelectors

Used to be calledContextual Selectorsbefore renaming to

Descendant Selectors

50

51

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 {}

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

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

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

a> ... 

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

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

53

54

55

You can often usea descendant selector

instead of a class

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

src="..."> ... 

Instead of this CSS:.headshot {}

You could use this CSS:p img {}

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


4+

1+

85+

1+

56

57

58

LinkPseudo Class

Selectors

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

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

CSS:a:link

a:visiteda:hovera:active

Combine withelement class selectors:

a.offsite:hover {}

59

60

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)

If CSS rules contradict,the last one wins

Specify your rules in this order:a {}

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


3+

1+

85+

1+

a:link

62

63

64


3+

1+

85+

1+

a:visited


3+

1+

85+

1+

a:hover


3+

1+

85+

1+

a:active

65

66

67

PseudoElementSelectors

:first-line:first-letter

&:before:after

:first-line

Selects 1st lineof a block-level element

& can only be usedwith certain properties

p:first-line {}

68

69

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

:before

Selects element& inserts content

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

:after

Selects element& inserts content

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

71

72

73

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

HTML<h1>1</h1>

User seesChapter: 1

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

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

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

User seesExpedia $

CSSa:after {content: attr(href)}

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

to site</a>

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

74

75

76


mshtml 5.5+*

1+

85+*

1+

:first-line

IE 8Rules with !important

are ignored inside :first-line

text-transformproperty doesn’t work

77

78

79


mshtml 5.5+*

1+

85+

1+

:first-letter

IE 6Combining :first-letter rules

with othersmay be problematic

IE 8Rules with !important

are ignored inside :first-letter


8+

1.9.1+

85+*

1+

:before

80

81

82

Some styles can’t be appliedto :before,

such as animations & transitions


8+

1.9.1+

85+*

1+

:after

Some styles can’t be appliedto :after,

such as animations & transitions

83

84

85

SelectorGroups

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;}


4+*

1+

85+

1+

86

87

88

IE 8If IE doesn’t support

one of the grouped selectors,ALL of them fail!

UniversalSelectors

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

* matchesevery (appropriate) HTML element

89

90

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;}

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


7+

1+

85+

1+

92

93

94

DynamicPseudo Class

Selectors

:hover & :active can be appliedto any element,

not just <a>Also added :focus

: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 {}

95

96

97


7+

1+

419.3+

1+

:hover


8+

1+

85+

1+

:active


8+

1+

85+

1+

:focus

98

99

100

LanguageSelectors

Select elementsbased on language encoding

Every language hasa 2-letter encoding

+ a dash& 2 more letters for dialects

fr = Frenchzh = Chineseen = English

en-US = American EnglishHTML



101

102

103

Different languagesuse different formatting

Bold & italic,indenting,

quotation marks,etc.

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

blockquote.literature:lang(zh) {}


8+

1.2+

525+

1+

ChildSelectors

104

105

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 {}


7+

1+

85+

1+

First ChildSelectors

107

108

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 


7+

1+

85+

1+

AdjacentSelectors

110

111

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%;}


7+

1+

85+

1+

AttributeSelectors

113

114

115

Allows you to selecta particular element

based on 1 of 4 attribute conditions

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

(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">

116

117

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

(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">


7+*

1+

85+

1+

x[attr]

119

120

121

Matches every td & th in tablewhen attribute is colspan

(regardless of whethercolspan is used!)


7+

1+

85+

1+

x[attr=“value”]


7+

1+

85+

1+

x[attr~=“value”]

122

123

124


7+

1+

85+

1+

x[attr|=“value”]

Sources

QuirksModeCompatibility Master Table

www.quirksmode.org/compatibility.html

125

126

127

Western CivilisationComplete CSS Guide:Selectors introduction

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

Comparison of layout engines(Cascading Style Sheets)

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

(Cascading_Style_Sheets)

CSS Compatibilityand Internet Explorer

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

128

129

130

Thank you!

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

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

© 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

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]

131

132

133

css selectors (handouts) - scott...

Documents