~noskcaj/ubuntu/utopic/jquery/merge : revision 14

1

2

3

4

<h1 id="title">Selectors</h1>

5

6

<h2>W3C Working Draft 15 December 2005</h2>

7

8

<dl>

9

10

<dt>This version:

11

12

13

http://www.w3.org/TR/2005/WD-css3-selectors-20051215</a>

14

15

<dt>Latest version:

16

17

18

http://www.w3.org/TR/css3-selectors</a>

19

20

<dt>Previous version:

21

22

23

http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>

24

25

<dt><a name=editors-list></a>Editors:

26

27

<dd class="vcard"><span class="fn">Daniel Glazman</span> (Invited Expert)</dd>

28

29

<dd class="vcard"><a lang="tr" class="url fn" href="http://www.tantek.com/">Tantek Çelik</a> (Invited Expert)

30

31

<dd class="vcard"><a href="mailto:ian@hixie.ch" class="url fn">Ian Hickson</a> (<span

32

class="company"><a href="http://www.google.com/">Google</a></span>)

33

34

<dd class="vcard"><span class="fn">Peter Linss</span> (former editor, <span class="company"><a

35

href="http://www.netscape.com/">Netscape/AOL</a></span>)

36

37

<dd class="vcard"><span class="fn">John Williams</span> (former editor, <span class="company"><a

38

href="http://www.quark.com/">Quark, Inc.</a></span>)

39

40

</dl>

41

42

<p class="copyright"><a

43

href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">

44

45

title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>

46

(<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts

47

Institute of Technology">MIT</abbr></a>, <a

48

href="http://www.ercim.org/"><acronym title="European Research

49

Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a

50

51

<a

52

href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

53

<a

54

href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,

55

<a

56

href="http://www.w3.org/Consortium/Legal/copyright-documents">document

57

use</a> rules apply.

58

59

60

61

</div>

62

63

<h2><a name=abstract></a>Abstract</h2>

64

65

<p><em>Selectors</em> are patterns that match against elements in a

66

tree. Selectors have been optimized for use with HTML and XML, and

67

are designed to be usable in performance-critical code.</p>

68

69

<p><acronym title="Cascading Style Sheets">CSS</acronym> (Cascading

70

Style Sheets) is a language for describing the rendering of <acronym

71

title="Hypertext Markup Language">HTML</acronym> and <acronym

72

title="Extensible Markup Language">XML</acronym> documents on

73

screen, on paper, in speech, etc. CSS uses Selectors for binding

74

style properties to elements in the document. This document

75

describes extensions to the selectors defined in CSS level 2. These

76

extended selectors will be used by CSS level 3.

77

78

<p>Selectors define the following function:</p>

79

80

<pre>expression ∗ element → boolean</pre>

81

82

<p>That is, given an element and a selector, this specification

83

defines whether that element matches the selector.</p>

84

85

<p>These expressions can also be used, for instance, to select a set

86

of elements, or a single element from a set of elements, by

87

evaluating the expression across all the elements in a

88

subtree. <acronym title="Simple Tree Transformation

89

Sheets">STTS</acronym> (Simple Tree Transformation Sheets), a

90

language for transforming XML trees, uses this mechanism. <a href="#refsSTTS">[STTS]</a></p>

91

92

<h2><a name=status></a>Status of this document</h2>

93

94

<p><em>This section describes the status of this document at the

95

time of its publication. Other documents may supersede this

96

document. A list of current W3C publications and the latest revision

97

of this technical report can be found in the <a

98

href="http://www.w3.org/TR/">W3C technical reports index at

99

http://www.w3.org/TR/.</a></em></p>

100

101

<p>This document describes the selectors that already exist in <a

102

href="#refsCSS1"><abbr title="CSS level 1">CSS1</abbr></a> and <a

103

href="#refsCSS21"><abbr title="CSS level 2">CSS2</abbr></a>, and

104

also proposes new selectors for <abbr title="CSS level

105

3">CSS3</abbr> and other languages that may need them.</p>

106

107

<p>The CSS Working Group doesn't expect that all implementations of

108

CSS3 will have to implement all selectors. Instead, there will

109

probably be a small number of variants of CSS3, called profiles. For

110

example, it may be that only a profile for interactive user agents

111

will include all of the selectors.</p>

112

113

<p>This specification is a last call working draft for the the <a

114

href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>

115

(<a href="/Style/">Style Activity</a>). This

116

document is a revision of the <a

117

href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/">Candidate

118

Recommendation dated 2001 November 13</a>, and has incorporated

119

implementation feedback received in the past few years. It is

120

expected that this last call will proceed straight to Proposed

121

Recommendation stage since it is believed that interoperability will

122

be demonstrable.</p>

123

124

<p>All persons are encouraged to review and implement this

125

specification and return comments to the (<a

126

href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)

127

public mailing list <a

128

href="http://www.w3.org/Mail/Lists.html#www-style">www-style</a>

129

(see <a href="http://www.w3.org/Mail/Request">instructions</a>). W3C

130

Members can also send comments directly to the CSS Working

131

Group.

132

The deadline for comments is 14 January 2006.</p>

133

134

<p>This is still a draft document and may be updated, replaced, or

135

obsoleted by other documents at any time. It is inappropriate to

136

cite a W3C Working Draft as other than "work in progress".

137

138

<p>This document may be available in <a

139

href="http://www.w3.org/Style/css3-selectors-updates/translations">translation</a>.

140

The English version of this specification is the only normative

141

version.

142

143

144

145

<h2><a name=contents>Table of contents</a></h2>

146

147

148

<li class="tocline2"><a href="#context">1. Introduction</a>

149

<ul>

150

<li><a href="#dependencies">1.1. Dependencies</a> </li>

151

<li><a href="#terminology">1.2. Terminology</a> </li>

152

<li><a href="#changesFromCSS2">1.3. Changes from CSS2</a> </li>

153

</ul>

154

<li class="tocline2"><a href="#selectors">2. Selectors</a>

155

<li class="tocline2"><a href="#casesens">3. Case sensitivity</a>

156

<li class="tocline2"><a href="#selector-syntax">4. Selector syntax</a>

157

<li class="tocline2"><a href="#grouping">5. Groups of selectors</a>

158

<li class="tocline2"><a href="#simple-selectors">6. Simple selectors</a>

159

160

<li class="tocline3"><a href="#type-selectors">6.1. Type selectors</a>

161

162

<li class="tocline4"><a href="#typenmsp">6.1.1. Type selectors and namespaces</a></li>

163

</ul>

164

<li class="tocline3"><a href="#universal-selector">6.2. Universal selector</a>

165

<ul>

166

<li><a href="#univnmsp">6.2.1. Universal selector and namespaces</a></li>

167

</ul>

168

<li class="tocline3"><a href="#attribute-selectors">6.3. Attribute selectors</a>

169

170

<li class="tocline4"><a href="#attribute-representation">6.3.1. Representation of attributes and attributes values</a>

171

<li><a href="#attribute-substrings">6.3.2. Substring matching attribute selectors</a>

172

<li class="tocline4"><a href="#attrnmsp">6.3.3. Attribute selectors and namespaces</a>

173

<li class="tocline4"><a href="#def-values">6.3.4. Default attribute values in DTDs</a></li>

174

</ul>

175

<li class="tocline3"><a href="#class-html">6.4. Class selectors</a>

176

<li class="tocline3"><a href="#id-selectors">6.5. ID selectors</a>

177

<li class="tocline3"><a href="#pseudo-classes">6.6. Pseudo-classes</a>

178

179

<li class="tocline4"><a href="#dynamic-pseudos">6.6.1. Dynamic pseudo-classes</a>

180

<li class="tocline4"><a href="#target-pseudo">6.6.2. The :target pseudo-class</a>

181

<li class="tocline4"><a href="#lang-pseudo">6.6.3. The :lang() pseudo-class</a>

182

<li class="tocline4"><a href="#UIstates">6.6.4. UI element states pseudo-classes</a>

183

<li class="tocline4"><a href="#structural-pseudos">6.6.5. Structural pseudo-classes</a>

184

<ul>

185

<li><a href="#root-pseudo">:root pseudo-class</a>

186

<li><a href="#nth-child-pseudo">:nth-child() pseudo-class</a>

187

<li><a href="#nth-last-child-pseudo">:nth-last-child()</a>

188

<li><a href="#nth-of-type-pseudo">:nth-of-type() pseudo-class</a>

189

190

<li><a href="#first-child-pseudo">:first-child pseudo-class</a>

191

<li><a href="#last-child-pseudo">:last-child pseudo-class</a>

192

<li><a href="#first-of-type-pseudo">:first-of-type pseudo-class</a>

193

<li><a href="#last-of-type-pseudo">:last-of-type pseudo-class</a>

194

<li><a href="#only-child-pseudo">:only-child pseudo-class</a>

195

<li><a href="#only-of-type-pseudo">:only-of-type pseudo-class</a>

196

<li><a href="#empty-pseudo">:empty pseudo-class</a></li>

197

</ul>

198

<li class="tocline4"><a href="#negation">6.6.7. The negation pseudo-class</a></li>

199

</ul>

200

</li>

201

</ul>

202

<li><a href="#pseudo-elements">7. Pseudo-elements</a>

203

<ul>

204

<li><a href="#first-line">7.1. The ::first-line pseudo-element</a>

205

<li><a href="#first-letter">7.2. The ::first-letter pseudo-element</a>

206

<li><a href="#UIfragments">7.3. The ::selection pseudo-element</a>

207

<li><a href="#gen-content">7.4. The ::before and ::after pseudo-elements</a></li>

208

</ul>

209

<li class="tocline2"><a href="#combinators">8. Combinators</a>

210

211

<li class="tocline3"><a href="#descendant-combinators">8.1. Descendant combinators</a>

212

<li class="tocline3"><a href="#child-combinators">8.2. Child combinators</a>

213

<li class="tocline3"><a href="#sibling-combinators">8.3. Sibling combinators</a>

214

215

<li class="tocline4"><a href="#adjacent-sibling-combinators">8.3.1. Adjacent sibling combinator</a>

216

<li class="tocline4"><a href="#general-sibling-combinators">8.3.2. General sibling combinator</a></li>

217

</ul>

218

</li>

219

</ul>

220

<li class="tocline2"><a href="#specificity">9. Calculating a selector's specificity</a>

221

<li class="tocline2"><a href="#w3cselgrammar">10. The grammar of Selectors</a>

222

223

<li class="tocline3"><a href="#grammar">10.1. Grammar</a>

224

<li class="tocline3"><a href="#lex">10.2. Lexical scanner</a></li>

225

</ul>

226

<li class="tocline2"><a href="#downlevel">11. Namespaces and down-level clients</a>

227

<li class="tocline2"><a href="#profiling">12. Profiles</a>

228

<li><a href="#Conformance">13. Conformance and requirements</a>

229

<li><a href="#Tests">14. Tests</a>

230

<li><a href="#ACKS">15. Acknowledgements</a>

231

<li class="tocline2"><a href="#references">16. References</a>

232

</ul>

233

234

</div>

235

236

<h2><a name=context>1. Introduction</a></h2>

237

238

<h3><a name=dependencies></a>1.1. Dependencies</h3>

239

240

<p>Some features of this specification are specific to CSS, or have

241

particular limitations or rules specific to CSS. In this

242

specification, these have been described in terms of CSS2.1. <a

243

href="#refsCSS21">[CSS21]</a></p>

244

245

<h3><a name=terminology></a>1.2. Terminology</h3>

246

247

<p>All of the text of this specification is normative except

248

examples, notes, and sections explicitly marked as

249

non-normative.</p>

250

251

<h3><a name=changesFromCSS2></a>1.3. Changes from CSS2</h3>

252

253

<p><em>This section is non-normative.</em></p>

254

255

<p>The main differences between the selectors in CSS2 and those in

256

Selectors are:

257

258

<ul>

259

260

<li>the list of basic definitions (selector, group of selectors,

261

simple selector, etc.) has been changed; in particular, what was

262

referred to in CSS2 as a simple selector is now called a sequence

263

of simple selectors, and the term "simple selector" is now used for

264

the components of this sequence</li>

265

266

<li>an optional namespace component is now allowed in type element

267

selectors, the universal selector and attribute selectors</li>

268

269

<li>a <a href="#general-sibling-combinators">new combinator</a> has been introduced</li>

270

271

<li>new simple selectors including substring matching attribute

272

selectors, and new pseudo-classes</li>

273

274

<li>new pseudo-elements, and introduction of the "::" convention

275

for pseudo-elements</li>

276

277

<li>the grammar has been rewritten</li>

278

279

<li>profiles to be added to specifications integrating Selectors

280

and defining the set of selectors which is actually supported by

281

each specification</li>

282

283

<li>Selectors are now a CSS3 Module and an independent

284

specification; other specifications can now refer to this document

285

independently of CSS</li>

286

287

<li>the specification now has its own test suite</li>

288

289

</ul>

290

291

<h2><a name=selectors></a>2. Selectors</h2>

292

293

<p><em>This section is non-normative, as it merely summarizes the

294

following sections.</em></p>

295

296

<p>A Selector represents a structure. This structure can be used as a

297

condition (e.g. in a CSS rule) that determines which elements a

298

selector matches in the document tree, or as a flat description of the

299

HTML or XML fragment corresponding to that structure.</p>

300

301

<p>Selectors may range from simple element names to rich contextual

302

representations.</p>

303

304

<p>The following table summarizes the Selector syntax:</p>

305

306

307

<thead>

308

<tr>

309

<th class="pattern">Pattern</th>

310

<th class="meaning">Meaning</th>

311

<th class="described">Described in section</th>

312

<th class="origin">First defined in CSS level</th></tr>

313

<tbody>

314

<tr>

315

316

<td class="meaning">any element</td>

317

<td class="described"><a

318

href="#universal-selector">Universal

319

selector</a></td>

320

321

<tr>

322

323

<td class="meaning">an element of type E</td>

324

<td class="described"><a

325

href="#type-selectors">Type selector</a></td>

326

327

<tr>

328

329

<td class="meaning">an E element with a "foo" attribute</td>

330

<td class="described"><a

331

href="#attribute-selectors">Attribute

332

selectors</a></td>

333

334

<tr>

335

336

<td class="meaning">an E element whose "foo" attribute value is exactly

337

equal to "bar"</td>

338

<td class="described"><a

339

href="#attribute-selectors">Attribute

340

selectors</a></td>

341

342

<tr>

343

344

<td class="meaning">an E element whose "foo" attribute value is a list of

345

space-separated values, one of which is exactly equal to "bar"</td>

346

<td class="described"><a

347

href="#attribute-selectors">Attribute

348

selectors</a></td>

349

350

<tr>

351

352

<td class="meaning">an E element whose "foo" attribute value begins exactly

353

with the string "bar"</td>

354

<td class="described"><a

355

href="#attribute-selectors">Attribute

356

selectors</a></td>

357

358

<tr>

359

360

<td class="meaning">an E element whose "foo" attribute value ends exactly

361

with the string "bar"</td>

362

<td class="described"><a

363

href="#attribute-selectors">Attribute

364

selectors</a></td>

365

366

<tr>

367

368

<td class="meaning">an E element whose "foo" attribute value contains the

369

substring "bar"</td>

370

<td class="described"><a

371

href="#attribute-selectors">Attribute

372

selectors</a></td>

373

374

<tr>

375

<td class="pattern">E[hreflang|="en"]</td>

376

<td class="meaning">an E element whose "hreflang" attribute has a hyphen-separated

377

list of values beginning (from the left) with "en"</td>

378

<td class="described"><a

379

href="#attribute-selectors">Attribute

380

selectors</a></td>

381

382

<tr>

383

384

<td class="meaning">an E element, root of the document</td>

385

<td class="described"><a

386

href="#structural-pseudos">Structural

387

pseudo-classes</a></td>

388

389

<tr>

390

<td class="pattern">E:nth-child(n)</td>

391

<td class="meaning">an E element, the n-th child of its parent</td>

392

<td class="described"><a

393

href="#structural-pseudos">Structural

394

pseudo-classes</a></td>

395

396

<tr>

397

<td class="pattern">E:nth-last-child(n)</td>

398

<td class="meaning">an E element, the n-th child of its parent, counting

399

from the last one</td>

400

<td class="described"><a

401

href="#structural-pseudos">Structural

402

pseudo-classes</a></td>

403

404

<tr>

405

406

<td class="meaning">an E element, the n-th sibling of its type</td>

407

<td class="described"><a

408

href="#structural-pseudos">Structural

409

pseudo-classes</a></td>

410

411

<tr>

412

413

<td class="meaning">an E element, the n-th sibling of its type, counting

414

from the last one</td>

415

<td class="described"><a

416

href="#structural-pseudos">Structural

417

pseudo-classes</a></td>

418

419

<tr>

420

<td class="pattern">E:first-child</td>

421

<td class="meaning">an E element, first child of its parent</td>

422

<td class="described"><a

423

href="#structural-pseudos">Structural

424

pseudo-classes</a></td>

425

426

<tr>

427

<td class="pattern">E:last-child</td>

428

<td class="meaning">an E element, last child of its parent</td>

429

<td class="described"><a

430

href="#structural-pseudos">Structural

431

pseudo-classes</a></td>

432

433

<tr>

434

<td class="pattern">E:first-of-type</td>

435

<td class="meaning">an E element, first sibling of its type</td>

436

<td class="described"><a

437

href="#structural-pseudos">Structural

438

pseudo-classes</a></td>

439

440

<tr>

441

442

<td class="meaning">an E element, last sibling of its type</td>

443

<td class="described"><a

444

href="#structural-pseudos">Structural

445

pseudo-classes</a></td>

446

447

<tr>

448

<td class="pattern">E:only-child</td>

449

<td class="meaning">an E element, only child of its parent</td>

450

<td class="described"><a

451

href="#structural-pseudos">Structural

452

pseudo-classes</a></td>

453

454

<tr>

455

456

<td class="meaning">an E element, only sibling of its type</td>

457

<td class="described"><a

458

href="#structural-pseudos">Structural

459

pseudo-classes</a></td>

460

461

<tr>

462

<td class="pattern">E:empty</td>

463

<td class="meaning">an E element that has no children (including text

464

nodes)</td>

465

<td class="described"><a

466

href="#structural-pseudos">Structural

467

pseudo-classes</a></td>

468

469

<tr>

470

<td class="pattern">E:link<br>E:visited</td>

471

<td class="meaning">an E element being the source anchor of a hyperlink of

472

which the target is not yet visited (:link) or already visited

473

(:visited)</td>

474

<td class="described"><a

475

href="#link">The link

476

pseudo-classes</a></td>

477

478

<tr>

479

<td class="pattern">E:active<br>E:hover<br>E:focus</td>

480

<td class="meaning">an E element during certain user actions</td>

481

<td class="described"><a

482

href="#useraction-pseudos">The user

483

action pseudo-classes</a></td>

484

485

<tr>

486

<td class="pattern">E:target</td>

487

<td class="meaning">an E element being the target of the referring URI</td>

488

<td class="described"><a

489

href="#target-pseudo">The target

490

pseudo-class</a></td>

491

492

<tr>

493

494

<td class="meaning">an element of type E in language "fr" (the document

495

language specifies how language is determined)</td>

496

<td class="described"><a

497

href="#lang-pseudo">The :lang()

498

pseudo-class</a></td>

499

500

<tr>

501

<td class="pattern">E:enabled<br>E:disabled</td>

502

<td class="meaning">a user interface element E which is enabled or

503

disabled</td>

504

<td class="described"><a

505

href="#UIstates">The UI element states

506

pseudo-classes</a></td>

507

508

<tr>

509

<td class="pattern">E:checked</td>

510

<td class="meaning">a user interface element E which is checked<!-- or in an

511

indeterminate state--> (for instance a radio-button or checkbox)</td>

512

<td class="described"><a

513

href="#UIstates">The UI element states

514

pseudo-classes</a></td>

515

516

<tr>

517

<td class="pattern">E::first-line</td>

518

<td class="meaning">the first formatted line of an E element</td>

519

<td class="described"><a

520

href="#first-line">The ::first-line

521

pseudo-element</a></td>

522

523

<tr>

524

<td class="pattern">E::first-letter</td>

525

<td class="meaning">the first formatted letter of an E element</td>

526

<td class="described"><a

527

href="#first-letter">The ::first-letter

528

pseudo-element</a></td>

529

530

<tr>

531

<td class="pattern">E::selection</td>

532

<td class="meaning">the portion of an E element that is currently

533

selected/highlighted by the user</td>

534

<td class="described"><a

535

href="#UIfragments">The UI element

536

fragments pseudo-elements</a></td>

537

538

<tr>

539

<td class="pattern">E::before</td>

540

<td class="meaning">generated content before an E element</td>

541

<td class="described"><a

542

href="#gen-content">The ::before

543

pseudo-element</a></td>

544

545

<tr>

546

<td class="pattern">E::after</td>

547

<td class="meaning">generated content after an E element</td>

548

<td class="described"><a

549

href="#gen-content">The ::after

550

pseudo-element</a></td>

551

552

<tr>

553

<td class="pattern">E.warning</td>

554

<td class="meaning">an E element whose class is

555

"warning" (the document language specifies how class is determined).</td>

556

<td class="described"><a

557

href="#class-html">Class

558

selectors</a></td>

559

560

<tr>

561

562

<td class="meaning">an E element with ID equal to "myid".</td>

563

<td class="described"><a

564

href="#id-selectors">ID

565

selectors</a></td>

566

567

<tr>

568

569

<td class="meaning">an E element that does not match simple selector s</td>

570

<td class="described"><a

571

href="#negation">Negation

572

pseudo-class</a></td>

573

574

<tr>

575

576

<td class="meaning">an F element descendant of an E element</td>

577

<td class="described"><a

578

href="#descendant-combinators">Descendant

579

combinator</a></td>

580

581

<tr>

582

583

<td class="meaning">an F element child of an E element</td>

584

<td class="described"><a

585

href="#child-combinators">Child

586

combinator</a></td>

587

588

<tr>

589

590

<td class="meaning">an F element immediately preceded by an E element</td>

591

<td class="described"><a

592

href="#adjacent-sibling-combinators">Adjacent sibling combinator</a></td>

593

594

<tr>

595

596

<td class="meaning">an F element preceded by an E element</td>

597

<td class="described"><a

598

href="#general-sibling-combinators">General sibling combinator</a></td>

599

600

601

<p>The meaning of each selector is derived from the table above by

602

prepending "matches" to the contents of each cell in the "Meaning"

603

column.</p>

604

605

<h2><a name=casesens>3. Case sensitivity</a></h2>

606

607

<p>The case sensitivity of document language element names, attribute

608

names, and attribute values in selectors depends on the document

609

language. For example, in HTML, element names are case-insensitive,

610

but in XML, they are case-sensitive.</p>

611

612

<h2><a name=selector-syntax>4. Selector syntax</a></h2>

613

614

<p>A <dfn><a name=selector>selector</a></dfn> is a chain of one

615

or more <a href="#sequence">sequences of simple selectors</a>

616

separated by <a href="#combinators">combinators</a>.</p>

617

618

<p>A <dfn><a name=sequence>sequence of simple selectors</a></dfn>

619

is a chain of <a href="#simple-selectors-dfn">simple selectors</a>

620

that are not separated by a <a href="#combinators">combinator</a>. It

621

always begins with a <a href="#type-selectors">type selector</a> or a

622

<a href="#universal-selector">universal selector</a>. No other type

623

selector or universal selector is allowed in the sequence.</p>

624

625

<p>A <dfn><a name=simple-selectors-dfn></a><a

626

href="#simple-selectors">simple selector</a></dfn> is either a <a

627

href="#type-selectors">type selector</a>, <a

628

href="#universal-selector">universal selector</a>, <a

629

href="#attribute-selectors">attribute selector</a>, <a

630

href="#class-html">class selector</a>, <a

631

href="#id-selectors">ID selector</a>, <a

632

href="#content-selectors">content selector</a>, or <a

633

href="#pseudo-classes">pseudo-class</a>. One <a

634

href="#pseudo-elements">pseudo-element</a> may be appended to the last

635

sequence of simple selectors.</p>

636

637

<p><dfn>Combinators</dfn> are: white space, "greater-than

638

sign" (U+003E, <code>></code>), "plus sign" (U+002B,

639

<code>+</code>) and "tilde" (U+007E, <code>~</code>). White

640

space may appear between a combinator and the simple selectors around

641

it. <a name=whitespace></a>Only the characters "space" (U+0020), "tab"

642

(U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form

643

feed" (U+000C) can occur in white space. Other space-like characters,

644

such as "em-space" (U+2003) and "ideographic space" (U+3000), are

645

never part of white space.</p>

646

647

<p>The elements of a document tree that are represented by a selector

648

are the <dfn><a name=subject></a>subjects of the selector</dfn>. A

649

selector consisting of a single sequence of simple selectors

650

represents any element satisfying its requirements. Prepending another

651

sequence of simple selectors and a combinator to a sequence imposes

652

additional matching constraints, so the subjects of a selector are

653

always a subset of the elements represented by the last sequence of

654

simple selectors.</p>

655

656

<p>An empty selector, containing no sequence of simple selectors and

657

no pseudo-element, is an <a href="#Conformance">invalid

658

selector</a>.</p>

659

660

<h2><a name=grouping>5. Groups of selectors</a></h2>

661

662

<p>When several selectors share the same declarations, they may be

663

grouped into a comma-separated list. (A comma is U+002C.)</p>

664

665

666

<p>CSS examples:</p>

667

<p>In this example, we condense three rules with identical

668

declarations into one. Thus,</p>

669

<pre>h1 { font-family: sans-serif }

670

h2 { font-family: sans-serif }

671

h3 { font-family: sans-serif }</pre>

672

<p>is equivalent to:</p>

673

<pre>h1, h2, h3 { font-family: sans-serif }</pre>

674

</div>

675

676

<p><strong>Warning</strong>: the equivalence is true in this example

677

because all the selectors are valid selectors. If just one of these

678

selectors were invalid, the entire group of selectors would be

679

invalid. This would invalidate the rule for all three heading

680

elements, whereas in the former case only one of the three individual

681

heading rules would be invalidated.</p>

682

683

684

<h2><a name=simple-selectors>6. Simple selectors</a></h2>

685

686

<h3><a name=type-selectors>6.1. Type selector</a></h3>

687

688

<p>A <dfn>type selector</dfn> is the name of a document language

689

element type. A type selector represents an instance of the element

690

type in the document tree.</p>

691

692

693

<p>Example:</p>

694

<p>The following selector represents an <code>h1</code> element in the document tree:</p>

695

696

</div>

697

698

699

<h4><a name=typenmsp>6.1.1. Type selectors and namespaces</a></h4>

700

701

<p>Type selectors allow an optional namespace (<a

702

href="#refsXMLNAMES">[XMLNAMES]</a>) component. A namespace prefix

703

that has been previously declared may be prepended to the element name

704

separated by the namespace separator "vertical bar"

705

(U+007C, <code>|</code>).</p>

706

707

<p>The namespace component may be left empty to indicate that the

708

selector is only to represent elements with no declared namespace.</p>

709

710

<p>An asterisk may be used for the namespace prefix, indicating that

711

the selector represents elements in any namespace (including elements

712

with no namespace).</p>

713

714

<p>Element type selectors that have no namespace component (no

715

namespace separator), represent elements without regard to the

716

element's namespace (equivalent to "<code>*|</code>") unless a default

717

namespace has been declared. If a default namespace has been declared,

718

the selector will represent only elements in the default

719

namespace.</p>

720

721

<p>A type selector containing a namespace prefix that has not been

722

previously declared is an <a href="#Conformance">invalid</a> selector.

723

The mechanism for declaring a namespace prefix is left up to the

724

language implementing Selectors. In CSS, such a mechanism is defined

725

in the General Syntax module.</p>

726

727

<p>In a namespace-aware client, element type selectors will only match

728

against the <a

729

href="http://www.w3.org/TR/REC-xml-names/#NT-LocalPart">local part</a>

730

of the element's <a

731

href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames">qualified

732

name</a>. See <a href="#downlevel">below</a> for notes about matching

733

behaviors in down-level clients.</p>

734

735

<p>In summary:</p>

736

737

<dl>

738

739

<dd>elements with name E in namespace ns</dd>

740

741

<dd>elements with name E in any namespace, including those without any

742

declared namespace</dd>

743

744

<dd>elements with name E without any declared namespace</dd>

745

746

<dd>if no default namespace has been specified, this is equivalent to *|E.

747

Otherwise it is equivalent to ns|E where ns is the default namespace.</dd>

748

</dl>

749

750

751

<p>CSS examples:</p>

752

753

<pre>@namespace foo url(http://www.example.com);

754

foo|h1 { color: blue }

755

foo|* { color: yellow }

756

|h1 { color: red }

757

*|h1 { color: green }

758

h1 { color: green }</pre>

759

760

<p>The first rule will match only <code>h1</code> elements in the

761

"http://www.example.com" namespace.</p>

762

763

<p>The second rule will match all elements in the

764

"http://www.example.com" namespace.</p>

765

766

<p>The third rule will match only <code>h1</code> elements without

767

any declared namespace.</p>

768

769

<p>The fourth rule will match <code>h1</code> elements in any

770

namespace (including those without any declared namespace).</p>

771

772

<p>The last rule is equivalent to the fourth rule because no default

773

namespace has been defined.</p>

774

775

</div>

776

777

<h3><a name=universal-selector>6.2. Universal selector</a> </h3>

778

779

<p>The <dfn>universal selector</dfn>, written "asterisk"

780

(<code>*</code>), represents the qualified name of any element

781

type. It represents any single element in the document tree in any

782

namespace (including those without any declared namespace) if no

783

default namespace has been specified. If a default namespace has been

784

specified, see <a href="#univnmsp">Universal selector and

785

Namespaces</a> below.</p>

786

787

<p>If the universal selector is not the only component of a sequence

788

of simple selectors, the <code>*</code> may be omitted.</p>

789

790

791

<p>Examples:</p>

792

<ul>

793

<li><code>*[hreflang|=en]</code> and <code>[hreflang|=en]</code> are equivalent,</li>

794

<li><code>*.warning</code> and <code>.warning</code> are equivalent,</li>

795

<li><code>*#myid</code> and <code>#myid</code> are equivalent.</li>

796

</ul>

797

</div>

798

799

<p class="note"><strong>Note:</strong> it is recommended that the

800

<code>*</code>, representing the universal selector, not be

801

omitted.</p>

802

803

<h4><a name=univnmsp>6.2.1. Universal selector and namespaces</a></h4>

804

805

<p>The universal selector allows an optional namespace component. It

806

is used as follows:</p>

807

808

<dl>

809

810

<dd>all elements in namespace ns</dd>

811

812

<dd>all elements</dd>

813

814

<dd>all elements without any declared namespace</dd>

815

816

<dd>if no default namespace has been specified, this is equivalent to *|*.

817

Otherwise it is equivalent to ns|* where ns is the default namespace.</dd>

818

</dl>

819

820

<p>A universal selector containing a namespace prefix that has not

821

been previously declared is an <a href="#Conformance">invalid</a>

822

selector. The mechanism for declaring a namespace prefix is left up

823

to the language implementing Selectors. In CSS, such a mechanism is

824

defined in the General Syntax module.</p>

825

826

827

<h3><a name=attribute-selectors>6.3. Attribute selectors</a></h3>

828

829

<p>Selectors allow the representation of an element's attributes. When

830

a selector is used as an expression to match against an element,

831

attribute selectors must be considered to match an element if that

832

element has an attribute that matches the attribute represented by the

833

attribute selector.</p>

834

835

<h4><a name=attribute-representation>6.3.1. Attribute presence and values

836

selectors</a></h4>

837

838

<p>CSS2 introduced four attribute selectors:</p>

839

840

<dl>

841

842

<dd>Represents an element with the <code>att</code> attribute, whatever the value of

843

the attribute.</dd>

844

845

<dd>Represents an element with the <code>att</code> attribute whose value is exactly

846

"val".</dd>

847

848

<dd>Represents an element with the <code>att</code> attribute whose value is a <a

849

href="#whitespace">whitespace</a>-separated list of words, one of

850

which is exactly "val". If "val" contains whitespace, it will never

851

represent anything (since the words are <em>separated</em> by

852

spaces).</dd>

853

854

<dd>Represents an element with the <code>att</code> attribute, its value either

855

being exactly "val" or beginning with "val" immediately followed by

856

"-" (U+002D). This is primarily intended to allow language subcode

857

matches (e.g., the <code>hreflang</code> attribute on the

858

<code>link</code> element in HTML) as described in RFC 3066 (<a

859

href="#refsRFC3066">[RFC3066]</a>). For <code>lang</code> (or

860

<code>xml:lang</code>) language subcode matching, please see <a

861

href="#lang-pseudo">the <code>:lang</code> pseudo-class</a>.</dd>

862

</dl>

863

864

<p>Attribute values must be identifiers or strings. The

865

case-sensitivity of attribute names and values in selectors depends on

866

the document language.</p>

867

868

869

870

<p>Examples:</p>

871

872

<p>The following attribute selector represents an <code>h1</code>

873

element that carries the <code>title</code> attribute, whatever its

874

value:</p>

875

876

<pre>h1[title]</pre>

877

878

<p>In the following example, the selector represents a

879

<code>span</code> element whose <code>class</code> attribute has

880

exactly the value "example":</p>

881

882

<pre>span[class="example"]</pre>

883

884

<p>Multiple attribute selectors can be used to represent several

885

attributes of an element, or several conditions on the same

886

attribute. Here, the selector represents a <code>span</code> element

887

whose <code>hello</code> attribute has exactly the value "Cleveland"

888

and whose <code>goodbye</code> attribute has exactly the value

889

"Columbus":</p>

890

891

<pre>span[hello="Cleveland"][goodbye="Columbus"]</pre>

892

893

<p>The following selectors illustrate the differences between "="

894

and "~=". The first selector will represent, for example, the value

895

"copyright copyleft copyeditor" on a <code>rel</code> attribute. The

896

second selector will only represent an <code>a</code> element with

897

an <code>href</code> attribute having the exact value

898

"http://www.w3.org/".</p>

899

900

<pre>a[rel~="copyright"]

901

a[href="http://www.w3.org/"]</pre>

902

903

<p>The following selector represents a <code>link</code> element

904

whose <code>hreflang</code> attribute is exactly "fr".</p>

905

906

<pre>link[hreflang=fr]</pre>

907

908

<p>The following selector represents a <code>link</code> element for

909

which the values of the <code>hreflang</code> attribute begins with

910

"en", including "en", "en-US", and "en-cockney":</p>

911

912

<pre>link[hreflang|="en"]</pre>

913

914

<p>Similarly, the following selectors represents a

915

<code>DIALOGUE</code> element whenever it has one of two different

916

values for an attribute <code>character</code>:</p>

917

918

<pre>DIALOGUE[character=romeo]

919

DIALOGUE[character=juliet]</pre>

920

921

</div>

922

923

<h4><a name=attribute-substrings></a>6.3.2. Substring matching attribute

924

selectors</h4>

925

926

<p>Three additional attribute selectors are provided for matching

927

substrings in the value of an attribute:</p>

928

929

<dl>

930

931

<dd>Represents an element with the <code>att</code> attribute whose value begins

932

with the prefix "val".</dd>

933

934

<dd>Represents an element with the <code>att</code> attribute whose value ends with

935

the suffix "val".</dd>

936

937

<dd>Represents an element with the <code>att</code> attribute whose value contains

938

at least one instance of the substring "val".</dd>

939

</dl>

940

941

<p>Attribute values must be identifiers or strings. The

942

case-sensitivity of attribute names in selectors depends on the

943

document language.</p>

944

945

946

<p>Examples:</p>

947

<p>The following selector represents an HTML <code>object</code>, referencing an

948

image:</p>

949

<pre>object[type^="image/"]</pre>

950

<p>The following selector represents an HTML anchor <code>a</code> with an

951

<code>href</code> attribute whose value ends with ".html".</p>

952

953

<p>The following selector represents an HTML paragraph with a <code>title</code>

954

attribute whose value contains the substring "hello"</p>

955

<pre>p[title*="hello"]</pre>

956

</div>

957

958

<h4><a name=attrnmsp>6.3.3. Attribute selectors and namespaces</a></h4>

959

960

<p>Attribute selectors allow an optional namespace component to the

961

attribute name. A namespace prefix that has been previously declared

962

may be prepended to the attribute name separated by the namespace

963

separator "vertical bar" (<code>|</code>). In keeping with

964

the Namespaces in the XML recommendation, default namespaces do not

965

apply to attributes, therefore attribute selectors without a namespace

966

component apply only to attributes that have no declared namespace

967

(equivalent to "<code>|attr</code>"). An asterisk may be used for the

968

namespace prefix indicating that the selector is to match all

969

attribute names without regard to the attribute's namespace.

970

971

<p>An attribute selector with an attribute name containing a namespace

972

prefix that has not been previously declared is an <a

973

href="#Conformance">invalid</a> selector. The mechanism for declaring

974

a namespace prefix is left up to the language implementing Selectors.

975

In CSS, such a mechanism is defined in the General Syntax module.

976

977

978

<p>CSS examples:</p>

979

<pre>@namespace foo "http://www.example.com";

980

[foo|att=val] { color: blue }

981

[*|att] { color: yellow }

982

[|att] { color: green }

983

[att] { color: green }</pre>

984

985

<p>The first rule will match only elements with the attribute

986

<code>att</code> in the "http://www.example.com" namespace with the

987

value "val".</p>

988

989

<p>The second rule will match only elements with the attribute

990

<code>att</code> regardless of the namespace of the attribute

991

(including no declared namespace).</p>

992

993

<p>The last two rules are equivalent and will match only elements

994

with the attribute <code>att</code> where the attribute is not

995

declared to be in a namespace.</p>

996

997

</div>

998

999

<h4><a name=def-values>6.3.4. Default attribute values in DTDs</a></h4>

1000

1001

<p>Attribute selectors represent explicitly set attribute values in

1002

the document tree. Default attribute values may be defined in a DTD or

1003

elsewhere, but cannot always be selected by attribute

1004

selectors. Selectors should be designed so that they work even if the

1005

default values are not included in the document tree.</p>

1006

1007

<p>More precisely, a UA is <em>not</em> required to read an "external

1008

subset" of the DTD but <em>is</em> required to look for default

1009

attribute values in the document's "internal subset." (See <a

1010

href="#refsXML10">[XML10]</a> for definitions of these subsets.)</p>

1011

1012

<p>A UA that recognizes an XML namespace <a

1013

href="#refsXMLNAMES">[XMLNAMES]</a> is not required to use its

1014

knowledge of that namespace to treat default attribute values as if

1015

they were present in the document. (For example, an XHTML UA is not

1016

required to use its built-in knowledge of the XHTML DTD.)</p>

1017

1018

<p class="note"><strong>Note:</strong> Typically, implementations

1019

choose to ignore external subsets.</p>

1020

1021

1022

<p>Example:</p>

1023

1024

<p>Consider an element EXAMPLE with an attribute "notation" that has a

1025

default value of "decimal". The DTD fragment might be</p>

1026

1027

1028

1029

<p>If the style sheet contains the rules</p>

1030

1031

<pre>EXAMPLE[notation=decimal] { /*... default property settings ...*/ }

1032

EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>

1033

1034

<p>the first rule will not match elements whose "notation" attribute

1035

is set by default, i.e. not set explicitly. To catch all cases, the

1036

attribute selector for the default value must be dropped:</p>

1037

1038

<pre>EXAMPLE { /*... default property settings ...*/ }

1039

EXAMPLE[notation=octal] { /*... other settings...*/ }</pre>

1040

1041

<p>Here, because the selector <code>EXAMPLE[notation=octal]</code> is

1042

more specific than the tag

1043

selector alone, the style declarations in the second rule will override

1044

those in the first for elements that have a "notation" attribute value

1045

of "octal". Care has to be taken that all property declarations that

1046

are to apply only to the default case are overridden in the non-default

1047

cases' style rules.</p>

1048

1049

</div>

1050

1051

<h3><a name=class-html>6.4. Class selectors</a></h3>

1052

1053

<p>Working with HTML, authors may use the period (U+002E,

1054

<code>.</code>) notation as an alternative to the <code>~=</code>

1055

notation when representing the <code>class</code> attribute. Thus, for

1056

HTML, <code>div.value</code> and <code>div[class~=value]</code> have

1057

the same meaning. The attribute value must immediately follow the

1058

"period" (<code>.</code>).</p>

1059

1060

<p>UAs may apply selectors using the period (.) notation in XML

1061

documents if the UA has namespace-specific knowledge that allows it to

1062

determine which attribute is the "class" attribute for the

1063

respective namespace. One such example of namespace-specific knowledge

1064

is the prose in the specification for a particular namespace (e.g. SVG

1065

1.0 <a href="#refsSVG">[SVG]</a> describes the <a

1066

href="http://www.w3.org/TR/2001/PR-SVG-20010719/styling.html#ClassAttribute">SVG

1067

"class" attribute</a> and how a UA should interpret it, and

1068

similarly MathML 1.01 <a href="#refsMATH">[MATH]</a> describes the <a

1069

href="http://www.w3.org/1999/07/REC-MathML-19990707/chapter2.html#sec2.3.4">MathML

1070

"class" attribute</a>.)</p>

1071

1072

1073

<p>CSS examples:</p>

1074

1075

<p>We can assign style information to all elements with

1076

<code>class~="pastoral"</code> as follows:</p>

1077

1078

<pre>*.pastoral { color: green } /* all elements with class~=pastoral */</pre>

1079

1080

1081

1082

<pre>.pastoral { color: green } /* all elements with class~=pastoral */</pre>

1083

1084

<p>The following assigns style only to H1 elements with

1085

<code>class~="pastoral"</code>:</p>

1086

1087

<pre>H1.pastoral { color: green } /* H1 elements with class~=pastoral */</pre>

1088

1089

<p>Given these rules, the first H1 instance below would not have

1090

green text, while the second would:</p>

1091

1092

<pre><H1>Not green</H1>

1093

<H1 class="pastoral">Very green</H1></pre>

1094

1095

</div>

1096

1097

<p>To represent a subset of "class" values, each value must be preceded

1098

by a ".", in any order.</P>

1099

1100

1101

1102

<p>CSS example:</p>

1103

1104

<p>The following rule matches any P element whose "class" attribute

1105

has been assigned a list of <a

1106

href="#whitespace">whitespace</a>-separated values that includes

1107

"pastoral" and "marine":</p>

1108

1109

<pre>p.pastoral.marine { color: green }</pre>

1110

1111

<p>This rule matches when <code>class="pastoral blue aqua

1112

marine"</code> but does not match for <code>class="pastoral

1113

blue"</code>.</p>

1114

1115

</div>

1116

1117

<p class="note"><strong>Note:</strong> Because CSS gives considerable

1118

power to the "class" attribute, authors could conceivably design their

1119

own "document language" based on elements with almost no associated

1120

presentation (such as DIV and SPAN in HTML) and assigning style

1121

information through the "class" attribute. Authors should avoid this

1122

practice since the structural elements of a document language often

1123

have recognized and accepted meanings and author-defined classes may

1124

not.</p>

1125

1126

<p class="note"><strong>Note:</strong> If an element has multiple

1127

class attributes, their values must be concatenated with spaces

1128

between the values before searching for the class. As of this time the

1129

working group is not aware of any manner in which this situation can

1130

be reached, however, so this behavior is explicitly non-normative in

1131

this specification.</p>

1132

1133

<h3><a name=id-selectors>6.5. ID selectors</a></h3>

1134

1135

<p>Document languages may contain attributes that are declared to be

1136

of type ID. What makes attributes of type ID special is that no two

1137

such attributes can have the same value in a document, regardless of

1138

the type of the elements that carry them; whatever the document

1139

language, an ID typed attribute can be used to uniquely identify its

1140

element. In HTML all ID attributes are named "id"; XML applications

1141

may name ID attributes differently, but the same restriction

1142

applies.</p>

1143

1144

<p>An ID-typed attribute of a document language allows authors to

1145

assign an identifier to one element instance in the document tree. W3C

1146

ID selectors represent an element instance based on its identifier. An

1147

ID selector contains a "number sign" (U+0023,

1148

<code>#</code>) immediately followed by the ID value, which must be an

1149

identifier.</p>

1150

1151

<p>Selectors does not specify how a UA knows the ID-typed attribute of

1152

an element. The UA may, e.g., read a document's DTD, have the

1153

information hard-coded or ask the user.

1154

1155

1156

<p>Examples:</p>

1157

<p>The following ID selector represents an <code>h1</code> element

1158

whose ID-typed attribute has the value "chapter1":</p>

1159

<pre>h1#chapter1</pre>

1160

<p>The following ID selector represents any element whose ID-typed

1161

attribute has the value "chapter1":</p>

1162

<pre>#chapter1</pre>

1163

<p>The following selector represents any element whose ID-typed

1164

attribute has the value "z98y".</p>

1165

1166

</div>

1167

1168

<p class="note"><strong>Note.</strong> In XML 1.0 <a

1169

href="#refsXML10">[XML10]</a>, the information about which attribute

1170

contains an element's IDs is contained in a DTD or a schema. When

1171

parsing XML, UAs do not always read the DTD, and thus may not know

1172

what the ID of an element is (though a UA may have namespace-specific

1173

knowledge that allows it to determine which attribute is the ID

1174

attribute for that namespace). If a style sheet designer knows or

1175

suspects that a UA may not know what the ID of an element is, he

1176

should use normal attribute selectors instead:

1177

<code>[name=p371]</code> instead of <code>#p371</code>. Elements in

1178

XML 1.0 documents without a DTD do not have IDs at all.</p>

1179

1180

<p>If an element has multiple ID attributes, all of them must be

1181

treated as IDs for that element for the purposes of the ID

1182

selector. Such a situation could be reached using mixtures of xml:id,

1183

DOM3 Core, XML DTDs, and namespace-specific knowledge.</p>

1184

1185

<h3><a name=pseudo-classes>6.6. Pseudo-classes</a></h3>

1186

1187

<p>The pseudo-class concept is introduced to permit selection based on

1188

information that lies outside of the document tree or that cannot be

1189

expressed using the other simple selectors.</p>

1190

1191

<p>A pseudo-class always consists of a "colon"

1192

(<code>:</code>) followed by the name of the pseudo-class and

1193

optionally by a value between parentheses.</p>

1194

1195

<p>Pseudo-classes are allowed in all sequences of simple selectors

1196

contained in a selector. Pseudo-classes are allowed anywhere in

1197

sequences of simple selectors, after the leading type selector or

1198

universal selector (possibly omitted). Pseudo-class names are

1199

case-insensitive. Some pseudo-classes are mutually exclusive, while

1200

others can be applied simultaneously to the same

1201

element. Pseudo-classes may be dynamic, in the sense that an element

1202

may acquire or lose a pseudo-class while a user interacts with the

1203

document.</p>

1204

1205

1206

<h4><a name=dynamic-pseudos>6.6.1. Dynamic pseudo-classes</a></h4>

1207

1208

<p>Dynamic pseudo-classes classify elements on characteristics other

1209

than their name, attributes, or content, in principle characteristics

1210

that cannot be deduced from the document tree.</p>

1211

1212

<p>Dynamic pseudo-classes do not appear in the document source or

1213

document tree.</p>

1214

1215

1216

<h5>The <a name=link>link pseudo-classes: :link and :visited</a></h5>

1217

1218

<p>User agents commonly display unvisited links differently from

1219

previously visited ones. Selectors

1220

provides the pseudo-classes <code>:link</code> and

1221

<code>:visited</code> to distinguish them:</p>

1222

1223

<ul>

1224

<li>The <code>:link</code> pseudo-class applies to links that have

1225

not yet been visited.</li>

1226

<li>The <code>:visited</code> pseudo-class applies once the link has

1227

been visited by the user. </li>

1228

</ul>

1229

1230

<p>After some amount of time, user agents may choose to return a

1231

visited link to the (unvisited) ':link' state.</p>

1232

1233

<p>The two states are mutually exclusive.</p>

1234

1235

1236

1237

<p>Example:</p>

1238

1239

<p>The following selector represents links carrying class

1240

<code>external</code> and already visited:</p>

1241

1242

<pre>a.external:visited</pre>

1243

1244

</div>

1245

1246

<p class="note"><strong>Note:</strong> It is possible for style sheet

1247

authors to abuse the :link and :visited pseudo-classes to determine

1248

which sites a user has visited without the user's consent.

1249

1250

<p>UAs may therefore treat all links as unvisited links, or implement

1251

other measures to preserve the user's privacy while rendering visited

1252

and unvisited links differently.</p>

1253

1254

<h5>The <a name=useraction-pseudos>user action pseudo-classes

1255

:hover, :active, and :focus</a></h5>

1256

1257

<p>Interactive user agents sometimes change the rendering in response

1258

to user actions. Selectors provides

1259

three pseudo-classes for the selection of an element the user is

1260

acting on.</p>

1261

1262

<ul>

1263

1264

<li>The <code>:hover</code> pseudo-class applies while the user

1265

designates an element with a pointing device, but does not activate

1266

it. For example, a visual user agent could apply this pseudo-class

1267

when the cursor (mouse pointer) hovers over a box generated by the

1268

element. User agents not that do not support <a

1269

href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive

1270

media</a> do not have to support this pseudo-class. Some conforming

1271

user agents that support <a

1272

href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive

1273

media</a> may not be able to support this pseudo-class (e.g., a pen

1274

device that does not detect hovering).</li>

1275

1276

<li>The <code>:active</code> pseudo-class applies while an element

1277

is being activated by the user. For example, between the times the

1278

user presses the mouse button and releases it.</li>

1279

1280

<li>The <code>:focus</code> pseudo-class applies while an element

1281

has the focus (accepts keyboard or mouse events, or other forms of

1282

input). </li>

1283

1284

</ul>

1285

1286

<p>There may be document language or implementation specific limits on

1287

which elements can become <code>:active</code> or acquire

1288

<code>:focus</code>.</p>

1289

1290

<p>These pseudo-classes are not mutually exclusive. An element may

1291

match several pseudo-classes at the same time.</p>

1292

1293

<p>Selectors doesn't define if the parent of an element that is

1294

':active' or ':hover' is also in that state.</p>

1295

1296

1297

<p>Examples:</p>

1298

<pre>a:link /* unvisited links */

1299

a:visited /* visited links */

1300

a:hover /* user hovers */

1301

a:active /* active links */</pre>

1302

<p>An example of combining dynamic pseudo-classes:</p>

1303

<pre>a:focus

1304

a:focus:hover</pre>

1305

<p>The last selector matches <code>a</code> elements that are in

1306

the pseudo-class :focus and in the pseudo-class :hover.</p>

1307

</div>

1308

1309

<p class="note"><strong>Note:</strong> An element can be both ':visited'

1310

and ':active' (or ':link' and ':active').</p>

1311

1312

<h4><a name=target-pseudo>6.6.2. The target pseudo-class :target</a></h4>

1313

1314

<p>Some URIs refer to a location within a resource. This kind of URI

1315

ends with a "number sign" (#) followed by an anchor

1316

identifier (called the fragment identifier).</p>

1317

1318

<p>URIs with fragment identifiers link to a certain element within the

1319

document, known as the target element. For instance, here is a URI

1320

pointing to an anchor named <code>section_2</code> in an HTML

1321

document:</p>

1322

1323

<pre>http://example.com/html/top.html#section_2</pre>

1324

1325

<p>A target element can be represented by the <code>:target</code>

1326

pseudo-class. If the document's URI has no fragment identifier, then

1327

the document has no target element.</p>

1328

1329

1330

<p>Example:</p>

1331

<pre>p.note:target</pre>

1332

<p>This selector represents a <code>p</code> element of class

1333

<code>note</code> that is the target element of the referring

1334

URI.</p>

1335

</div>

1336

1337

1338

<p>CSS example:</p>

1339

<p>Here, the <code>:target</code> pseudo-class is used to make the

1340

target element red and place an image before it, if there is one:</p>

1341

<pre>*:target { color : red }

1342

*:target::before { content : url(target.png) }</pre>

1343

</div>

1344

1345

<h4><a name=lang-pseudo>6.6.3. The language pseudo-class :lang</a></h4>

1346

1347

<p>If the document language specifies how the human language of an

1348

element is determined, it is possible to write selectors that

1349

represent an element based on its language. For example, in HTML <a

1350

href="#refsHTML4">[HTML4]</a>, the language is determined by a

1351

combination of the <code>lang</code> attribute, the <code>meta</code>

1352

element, and possibly by information from the protocol (such as HTTP

1353

headers). XML uses an attribute called <code>xml:lang</code>, and

1354

there may be other document language-specific methods for determining

1355

the language.</p>

1356

1357

<p>The pseudo-class <code>:lang(C)</code> represents an element that

1358

is in language C. Whether an element is represented by a

1359

<code>:lang()</code> selector is based solely on the identifier C

1360

being either equal to, or a hyphen-separated substring of, the

1361

element's language value, in the same way as if performed by the <a

1362

href="#attribute-representation">'|='</a> operator in attribute

1363

selectors. The identifier C does not have to be a valid language

1364

name.</p>

1365

1366

<p>C must not be empty. (If it is, the selector is invalid.)</p>

1367

1368

<p class="note"><strong>Note:</strong> It is recommended that

1369

documents and protocols indicate language using codes from RFC 3066 <a

1370

href="#refsRFC3066">[RFC3066]</a> or its successor, and by means of

1371

"xml:lang" attributes in the case of XML-based documents <a

1372

href="#refsXML10">[XML10]</a>. See <a

1373

href="http://www.w3.org/International/questions/qa-lang-2or3.html">

1374

"FAQ: Two-letter or three-letter language codes."</a></p>

1375

1376

1377

<p>Examples:</p>

1378

<p>The two following selectors represent an HTML document that is in

1379

Belgian, French, or German. The two next selectors represent

1380

<code>q</code> quotations in an arbitrary element in Belgian, French,

1381

or German.</p>

1382

<pre>html:lang(fr-be)

1383

html:lang(de)

1384

:lang(fr-be) > q

1385

:lang(de) > q</pre>

1386

</div>

1387

1388

<h4><a name=UIstates>6.6.4. The UI element states pseudo-classes</a></h4>

1389

1390

<h5><a name=enableddisabled>The :enabled and :disabled pseudo-classes</a></h5>

1391

1392

<p>The <code>:enabled</code> pseudo-class allows authors to customize

1393

the look of user interface elements that are enabled — which the

1394

user can select or activate in some fashion (e.g. clicking on a button

1395

with a mouse). There is a need for such a pseudo-class because there

1396

is no way to programmatically specify the default appearance of say,

1397

an enabled <code>input</code> element without also specifying what it

1398

would look like when it was disabled.</p>

1399

1400

<p>Similar to <code>:enabled</code>, <code>:disabled</code> allows the

1401

author to specify precisely how a disabled or inactive user interface

1402

element should look.</p>

1403

1404

<p>Most elements will be neither enabled nor disabled. An element is

1405

enabled if the user can either activate it or transfer the focus to

1406

it. An element is disabled if it could be enabled, but the user cannot

1407

presently activate it or transfer focus to it.</p>

1408

1409

1410

<h5><a name=checked>The :checked pseudo-class</a></h5>

1411

1412

<p>Radio and checkbox elements can be toggled by the user. Some menu

1413

items are "checked" when the user selects them. When such elements are

1414

toggled "on" the <code>:checked</code> pseudo-class applies. The

1415

<code>:checked</code> pseudo-class initially applies to such elements

1416

that have the HTML4 <code>selected</code> and <code>checked</code>

1417

attributes as described in <a

1418

href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1">Section

1419

17.2.1 of HTML4</a>, but of course the user can toggle "off" such

1420

elements in which case the <code>:checked</code> pseudo-class would no

1421

longer apply. While the <code>:checked</code> pseudo-class is dynamic

1422

in nature, and is altered by user action, since it can also be based

1423

on the presence of the semantic HTML4 <code>selected</code> and

1424

<code>checked</code> attributes, it applies to all media.

1425

1426

1427

<h5><a name=indeterminate>The :indeterminate pseudo-class</a></h5>

1428

1429

1430

1431

<p>Radio and checkbox elements can be toggled by the user, but are

1432

sometimes in an indeterminate state, neither checked nor unchecked.

1433

This can be due to an element attribute, or DOM manipulation.</p>

1434

1435

<p>A future version of this specification may introduce an

1436

<code>:indeterminate</code> pseudo-class that applies to such elements.

1437

<!--While the <code>:indeterminate</code> pseudo-class is dynamic in

1438

nature, and is altered by user action, since it can also be based on

1439

the presence of an element attribute, it applies to all media.</p>

1440

1441

<p>Components of a radio-group initialized with no pre-selected choice

1442

are an example of :indeterminate state.--></p>

1443

1444

</div>

1445

1446

1447

<h4><a name=structural-pseudos>6.6.5. Structural pseudo-classes</a></h4>

1448

1449

<p>Selectors introduces the concept of <dfn>structural

1450

pseudo-classes</dfn> to permit selection based on extra information that lies in

1451

the document tree but cannot be represented by other simple selectors or

1452

combinators.

1453

1454

<p>Note that standalone pieces of PCDATA (text nodes in the DOM) are

1455

not counted when calculating the position of an element in the list of

1456

children of its parent. When calculating the position of an element in

1457

the list of children of its parent, the index numbering starts at 1.

1458

1459

1460

<h5><a name=root-pseudo>:root pseudo-class</a></h5>

1461

1462

<p>The <code>:root</code> pseudo-class represents an element that is

1463

the root of the document. In HTML 4, this is always the

1464

<code>HTML</code> element.

1465

1466

1467

<h5><a name=nth-child-pseudo>:nth-child() pseudo-class</a></h5>

1468

1469

<p>The

1470

<code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>

1471

pseudo-class notation represents an element that has

1472

<var>a</var><code>n</code>+<var>b</var>-1 siblings

1473

<strong>before</strong> it in the document tree, for a given positive

1474

integer or zero value of <code>n</code>, and has a parent element. In

1475

other words, this matches the <var>b</var>th child of an element after

1476

all the children have been split into groups of <var>a</var> elements

1477

each. For example, this allows the selectors to address every other

1478

row in a table, and could be used to alternate the color

1479

of paragraph text in a cycle of four. The <var>a</var> and

1480

<var>b</var> values must be zero, negative integers or positive

1481

integers. The index of the first child of an element is 1.

1482

1483

<p>In addition to this, <code>:nth-child()</code> can take

1484

'<code>odd</code>' and '<code>even</code>' as arguments instead.

1485

'<code>odd</code>' has the same signification as <code>2n+1</code>,

1486

and '<code>even</code>' has the same signification as <code>2n</code>.

1487

1488

1489

1490

<p>Examples:</p>

1491

<pre>tr:nth-child(2n+1) /* represents every odd row of an HTML table */

1492

tr:nth-child(odd) /* same */

1493

tr:nth-child(2n) /* represents every even row of an HTML table */

1494

tr:nth-child(even) /* same */

1495

1496

/* Alternate paragraph colours in CSS */

1497

p:nth-child(4n+1) { color: navy; }

1498

p:nth-child(4n+2) { color: green; }

1499

p:nth-child(4n+3) { color: maroon; }

1500

p:nth-child(4n+4) { color: purple; }</pre>

1501

</div>

1502

1503

<p>When <var>a</var>=0, no repeating is used, so for example

1504

<code>:nth-child(0n+5)</code> matches only the fifth child. When

1505

<var>a</var>=0, the <var>a</var><code>n</code> part need not be

1506

included, so the syntax simplifies to

1507

<code>:nth-child(<var>b</var>)</code> and the last example simplifies

1508

to <code>:nth-child(5)</code>.

1509

1510

1511

<p>Examples:</p>

1512

<pre>foo:nth-child(0n+1) /* represents an element foo, first child of its parent element */

1513

foo:nth-child(1) /* same */</pre>

1514

</div>

1515

1516

<p>When <var>a</var>=1, the number may be omitted from the rule.

1517

1518

1519

<p>Examples:</p>

1520

<p>The following selectors are therefore equivalent:</p>

1521

<pre>bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */

1522

bar:nth-child(n+0) /* same */

1523

bar:nth-child(n) /* same */

1524

bar /* same but lower specificity (0,0,1) */</pre>

1525

</div>

1526

1527

<p>If <var>b</var>=0, then every <var>a</var>th element is picked. In

1528

such a case, the <var>b</var> part may be omitted.

1529

1530

1531

<p>Examples:</p>

1532

<pre>tr:nth-child(2n+0) /* represents every even row of an HTML table */

1533

tr:nth-child(2n) /* same */</pre>

1534

</div>

1535

1536

<p>If both <var>a</var> and <var>b</var> are equal to zero, the

1537

pseudo-class represents no element in the document tree.</p>

1538

1539

<p>The value <var>a</var> can be negative, but only the positive

1540

values of <var>a</var><code>n</code>+<var>b</var>, for

1541

<code>n</code>≥0, may represent an element in the document

1542

tree.</p>

1543

1544

1545

<p>Example:</p>

1546

<pre>html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */</pre>

1547

</div>

1548

1549

<p>When the value <var>b</var> is negative, the "+" character in the

1550

expression must be removed (it is effectively replaced by the "-"

1551

character indicating the negative value of <var>b</var>).</p>

1552

1553

1554

<p>Examples:</p>

1555

<pre>:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */

1556

:nth-child(10n+9) /* Same */

1557

:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>

1558

</div>

1559

1560

1561

<h5><a name=nth-last-child-pseudo>:nth-last-child() pseudo-class</a></h5>

1562

1563

<p>The <code>:nth-last-child(<var>a</var>n+<var>b</var>)</code>

1564

pseudo-class notation represents an element that has

1565

<var>a</var><code>n</code>+<var>b</var>-1 siblings

1566

<strong>after</strong> it in the document tree, for a given positive

1567

integer or zero value of <code>n</code>, and has a parent element. See

1568

<code>:nth-child()</code> pseudo-class for the syntax of its argument.

1569

It also accepts the '<code>even</code>' and '<code>odd</code>' values

1570

as arguments.

1571

1572

1573

1574

<p>Examples:</p>

1575

<pre>tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */

1576

1577

foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,

1578

counting from the last one */</pre>

1579

</div>

1580

1581

1582

<h5><a name=nth-of-type-pseudo>:nth-of-type() pseudo-class</a></h5>

1583

1584

1585

pseudo-class notation represents an element that has

1586

<var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1587

element name <strong>before</strong> it in the document tree, for a

1588

given zero or positive integer value of <code>n</code>, and has a

1589

parent element. In other words, this matches the <var>b</var>th child

1590

of that type after all the children of that type have been split into

1591

groups of a elements each. See <code>:nth-child()</code> pseudo-class

1592

for the syntax of its argument. It also accepts the

1593

'<code>even</code>' and '<code>odd</code>' values.

1594

1595

1596

1597

<p>CSS example:</p>

1598

<p>This allows an author to alternate the position of floated images:</p>

1599

<pre>img:nth-of-type(2n+1) { float: right; }

1600

img:nth-of-type(2n) { float: left; }</pre>

1601

</div>

1602

1603

1604

<h5><a name=nth-last-of-type-pseudo>:nth-last-of-type() pseudo-class</a></h5>

1605

1606

1607

pseudo-class notation represents an element that has

1608

<var>a</var><code>n</code>+<var>b</var>-1 siblings with the same

1609

element name <strong>after</strong> it in the document tree, for a

1610

given zero or positive integer value of <code>n</code>, and has a

1611

parent element. See <code>:nth-child()</code> pseudo-class for the

1612

syntax of its argument. It also accepts the '<code>even</code>' and '<code>odd</code>' values.

1613

1614

1615

1616

<p>Example:</p>

1617

<p>To represent all <code>h2</code> children of an XHTML

1618

<code>body</code> except the first and last, one could use the

1619

following selector:</p>

1620

1621

<p>In this case, one could also use <code>:not()</code>, although the

1622

selector ends up being just as long:</p>

1623

<pre>body > h2:not(:first-of-type):not(:last-of-type)</pre>

1624

</div>

1625

1626

1627

<h5><a name=first-child-pseudo>:first-child pseudo-class</a></h5>

1628

1629

<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code> pseudo-class

1630

represents an element that is the first child of some other element.

1631

1632

1633

1634

<p>Examples:</p>

1635

<p>The following selector represents a <code>p</code> element that is

1636

the first child of a <code>div</code> element:</p>

1637

<pre>div > p:first-child</pre>

1638

<p>This selector can represent the <code>p</code> inside the

1639

<code>div</code> of the following fragment:</p>

1640

<pre><p> The last P before the note.</p>

1641

1642

<p> The first P inside the note.</p>

1643

</div></pre>but cannot represent the second <code>p</code> in the following

1644

fragment:

1645

<pre><p> The last P before the note.</p>

1646

1647

1648

<p> The first P inside the note.</p>

1649

</div></pre>

1650

<p>The following two selectors are usually equivalent:</p>

1651

<pre>* > a:first-child /* a is first child of any element */

1652

a:first-child /* Same (assuming a is not the root element) */</pre>

1653

</div>

1654

1655

<h5><a name=last-child-pseudo>:last-child pseudo-class</a></h5>

1656

1657

<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code> pseudo-class

1658

represents an element that is the last child of some other element.

1659

1660

1661

<p>Example:</p>

1662

<p>The following selector represents a list item <code>li</code> that

1663

is the last child of an ordered list <code>ol</code>.

1664

<pre>ol > li:last-child</pre>

1665

</div>

1666

1667

<h5><a name=first-of-type-pseudo>:first-of-type pseudo-class</a></h5>

1668

1669

<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code> pseudo-class

1670

represents an element that is the first sibling of its type in the list of

1671

children of its parent element.

1672

1673

1674

<p>Example:</p>

1675

<p>The following selector represents a definition title

1676

<code>dt</code> inside a definition list <code>dl</code>, this

1677

<code>dt</code> being the first of its type in the list of children of

1678

its parent element.</p>

1679

<pre>dl dt:first-of-type</pre>

1680

<p>It is a valid description for the first two <code>dt</code>

1681

elements in the following example but not for the third one:</p>

1682

1683

<dt>gigogne</dt>

1684

<dd>

1685

<dl>

1686

<dt>fusée</dt>

1687

<dd>multistage rocket</dd>

1688

<dt>table</dt>

1689

<dd>nest of tables</dd>

1690

</dl>

1691

</dd>

1692

</dl></pre>

1693

</div>

1694

1695

<h5><a name=last-of-type-pseudo>:last-of-type pseudo-class</a></h5>

1696

1697

<p>Same as <code>:nth-last-of-type(1)</code>. The

1698

<code>:last-of-type</code> pseudo-class represents an element that is

1699

the last sibling of its type in the list of children of its parent

1700

element.</p>

1701

1702

1703

<p>Example:</p>

1704

<p>The following selector represents the last data cell

1705

<code>td</code> of a table row.</p>

1706

1707

</div>

1708

1709

<h5><a name=only-child-pseudo>:only-child pseudo-class</a></h5>

1710

1711

<p>Represents an element that has a parent element and whose parent

1712

element has no other element children. Same as

1713

<code>:first-child:last-child</code> or

1714

<code>:nth-child(1):nth-last-child(1)</code>, but with a lower

1715

specificity.</p>

1716

1717

<h5><a name=only-of-type-pseudo>:only-of-type pseudo-class</a></h5>

1718

1719

<p>Represents an element that has a parent element and whose parent

1720

element has no other element children with the same element name. Same

1721

as <code>:first-of-type:last-of-type</code> or

1722

<code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower

1723

specificity.</p>

1724

1725

1726

<h5><a name=empty-pseudo></a>:empty pseudo-class</h5>

1727

1728

<p>The <code>:empty</code> pseudo-class represents an element that has

1729

no children at all. In terms of the DOM, only element nodes and text

1730

nodes (including CDATA nodes and entity references) whose data has a

1731

non-zero length must be considered as affecting emptiness; comments,

1732

PIs, and other nodes must not affect whether an element is considered

1733

empty or not.</p>

1734

1735

1736

<p>Examples:</p>

1737

<p><code>p:empty</code> is a valid representation of the following fragment:</p>

1738

1739

<p><code>foo:empty</code> is not a valid representation for the

1740

following fragments:</p>

1741

1742

1743

<pre><foo>this is not <bar>:empty</bar></foo></pre>

1744

</div>

1745

1746

<h4><a name=content-selectors>6.6.6. Blank</a></h4>

1747

1748

<p>This section intentionally left blank.</p>

1749

1750

1751

<h4><a name=negation></a>6.6.7. The negation pseudo-class</h4>

1752

1753

<p>The negation pseudo-class, <code>:not(<var>X</var>)</code>, is a

1754

functional notation taking a <a href="#simple-selectors-dfn">simple

1755

selector</a> (excluding the negation pseudo-class itself and

1756

pseudo-elements) as an argument. It represents an element that is not

1757

represented by the argument.

1758

1759

<!-- pseudo-elements are not simple selectors, so the above paragraph

1760

may be a bit confusing -->

1761

1762

1763

<p>Examples:</p>

1764

<p>The following CSS selector matches all <code>button</code>

1765

elements in an HTML document that are not disabled.</p>

1766

<pre>button:not([DISABLED])</pre>

1767

<p>The following selector represents all but <code>FOO</code>

1768

elements.</p>

1769

1770

<p>The following group of selectors represents all HTML elements

1771

except links.</p>

1772

<pre>html|*:not(:link):not(:visited)</pre>

1773

</div>

1774

1775

<p>Default namespace declarations do not affect the argument of the

1776

negation pseudo-class unless the argument is a universal selector or a

1777

type selector.</p>

1778

1779

1780

<p>Examples:</p>

1781

<p>Assuming that the default namespace is bound to

1782

"http://example.com/", the following selector represents all

1783

elements that are not in that namespace:</p>

1784

1785

<p>The following CSS selector matches any element being hovered,

1786

regardless of its namespace. In particular, it is not limited to

1787

only matching elements in the default namespace that are not being

1788

hovered, and elements not in the default namespace don't match the

1789

rule when they <em>are</em> being hovered.</p>

1790

<pre>*|*:not(:hover)</pre>

1791

</div>

1792

1793

<p class="note"><strong>Note</strong>: the :not() pseudo allows

1794

useless selectors to be written. For instance <code>:not(*|*)</code>,

1795

which represents no element at all, or <code>foo:not(bar)</code>,

1796

which is equivalent to <code>foo</code> but with a higher

1797

specificity.</p>

1798

1799

<h3><a name=pseudo-elements>7. Pseudo-elements</a></h3>

1800

1801

<p>Pseudo-elements create abstractions about the document tree beyond

1802

those specified by the document language. For instance, document

1803

languages do not offer mechanisms to access the first letter or first

1804

line of an element's content. Pseudo-elements allow designers to refer

1805

to this otherwise inaccessible information. Pseudo-elements may also

1806

provide designers a way to refer to content that does not exist in the

1807

source document (e.g., the <code>::before</code> and

1808

<code>::after</code> pseudo-elements give access to generated

1809

content).</p>

1810

1811

<p>A pseudo-element is made of two colons (<code>::</code>) followed

1812

by the name of the pseudo-element.</p>

1813

1814

<p>This <code>::</code> notation is introduced by the current document

1815

in order to establish a discrimination between pseudo-classes and

1816

pseudo-elements. For compatibility with existing style sheets, user

1817

agents must also accept the previous one-colon notation for

1818

pseudo-elements introduced in CSS levels 1 and 2 (namely,

1819

<code>:first-line</code>, <code>:first-letter</code>,

1820

<code>:before</code> and <code>:after</code>). This compatibility is

1821

not allowed for the new pseudo-elements introduced in CSS level 3.</p>

1822

1823

<p>Only one pseudo-element may appear per selector, and if present it

1824

must appear after the sequence of simple selectors that represents the

1825

<a href="#subject">subjects</a> of the selector. <span class="note">A

1826

future version of this specification may allow multiple

1827

pesudo-elements per selector.</span></p>

1828

1829

<h4><a name=first-line>7.1. The ::first-line pseudo-element</a></h4>

1830

1831

<p>The <code>::first-line</code> pseudo-element describes the contents

1832

of the first formatted line of an element.

1833

1834

1835

<p>CSS example:</p>

1836

<pre>p::first-line { text-transform: uppercase }</pre>

1837

<p>The above rule means "change the letters of the first line of every

1838

paragraph to uppercase".</p>

1839

</div>

1840

1841

<p>The selector <code>p::first-line</code> does not match any real

1842

HTML element. It does match a pseudo-element that conforming user

1843

agents will insert at the beginning of every paragraph.</p>

1844

1845

<p>Note that the length of the first line depends on a number of

1846

factors, including the width of the page, the font size, etc. Thus,

1847

an ordinary HTML paragraph such as:</p>

1848

1849

<pre>

1850

<P>This is a somewhat long HTML

1851

paragraph that will be broken into several

1852

lines. The first line will be identified

1853

by a fictional tag sequence. The other lines

1854

will be treated as ordinary lines in the

1855

paragraph.</P>

1856

</pre>

1857

1858

<p>the lines of which happen to be broken as follows:

1859

1860

<pre>

1861

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

1862

will be broken into several lines. The first

1863

line will be identified by a fictional tag

1864

sequence. The other lines will be treated as

1865

ordinary lines in the paragraph.

1866

</pre>

1867

1868

<p>This paragraph might be "rewritten" by user agents to include the

1869

<em>fictional tag sequence</em> for <code>::first-line</code>. This

1870

fictional tag sequence helps to show how properties are inherited.</p>

1871

1872

<pre>

1873

<P><b><P::first-line></b> This is a somewhat long HTML

1874

paragraph that <b></P::first-line></b> will be broken into several

1875

lines. The first line will be identified

1876

by a fictional tag sequence. The other lines

1877

will be treated as ordinary lines in the

1878

paragraph.</P>

1879

</pre>

1880

1881

<p>If a pseudo-element breaks up a real element, the desired effect

1882

can often be described by a fictional tag sequence that closes and

1883

then re-opens the element. Thus, if we mark up the previous paragraph

1884

with a <code>span</code> element:</p>

1885

1886

<pre>

1887

<P><b><SPAN class="test"></b> This is a somewhat long HTML

1888

paragraph that will be broken into several

1889

lines.<b></SPAN></b> The first line will be identified

1890

by a fictional tag sequence. The other lines

1891

will be treated as ordinary lines in the

1892

paragraph.</P>

1893

</pre>

1894

1895

<p>the user agent could simulate start and end tags for

1896

<code>span</code> when inserting the fictional tag sequence for

1897

<code>::first-line</code>.

1898

1899

<pre>

1900

<P><P::first-line><b><SPAN class="test"></b> This is a

1901

somewhat long HTML

1902

paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be

1903

broken into several

1904

lines.<b></SPAN></b> The first line will be identified

1905

by a fictional tag sequence. The other lines

1906

will be treated as ordinary lines in the

1907

paragraph.</P>

1908

</pre>

1909

1910

<p>In CSS, the <code>::first-line</code> pseudo-element can only be

1911

attached to a block-level element, an inline-block, a table-caption,

1912

or a table-cell.</p>

1913

1914

<p><a name="first-formatted-line"></a>The "first formatted line" of an

1915

element may occur inside a

1916

block-level descendant in the same flow (i.e., a block-level

1917

descendant that is not positioned and not a float). E.g., the first

1918

line of the <code>div</code> in <code><DIV><P>This

1919

line...</P>&lt/DIV></code> is the first line of the <code>p</code> (assuming

1920

that both <code>p</code> and <code>div</code> are block-level).

1921

1922

<p>The first line of a table-cell or inline-block cannot be the first

1923

formatted line of an ancestor element. Thus, in <code><DIV><P

1924

STYLE="display: inline-block">Hello<BR>Goodbye</P>

1925

etcetera</DIV></code> the first formatted line of the

1926

<code>div</code> is not the line "Hello".

1927

1928

<p class="note">Note that the first line of the <code>p</code> in this

1929

fragment: <code><p&gt<br>First...</code> doesn't contain any

1930

letters (assuming the default style for <code>br</code> in HTML

1931

4). The word "First" is not on the first formatted line.

1932

1933

<p>A UA should act as if the fictional start tags of the

1934

<code>::first-line</code> pseudo-elements were nested just inside the

1935

innermost enclosing block-level element. (Since CSS1 and CSS2 were

1936

silent on this case, authors should not rely on this behavior.) Here

1937

is an example. The fictional tag sequence for</p>

1938

1939

<pre>

1940

<DIV>

1941

<P>First paragraph</P>

1942

<P>Second paragraph</P>

1943

</DIV>

1944

</pre>

1945

1946

1947

1948

<pre>

1949

<DIV>

1950

<P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>

1951

<P><P::first-line>Second paragraph</P::first-line></P>

1952

</DIV>

1953

</pre>

1954

1955

<p>The <code>::first-line</code> pseudo-element is similar to an

1956

inline-level element, but with certain restrictions. In CSS, the

1957

following properties apply to a <code>::first-line</code>

1958

pseudo-element: font properties, color property, background

1959

properties, 'word-spacing', 'letter-spacing', 'text-decoration',

1960

'vertical-align', 'text-transform', 'line-height'. UAs may apply other

1961

properties as well.</p>

1962

1963

1964

<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>

1965

1966

<p>The <code>::first-letter</code> pseudo-element represents the first

1967

letter of the first line of a block, if it is not preceded by any

1968

other content (such as images or inline tables) on its line. The

1969

::first-letter pseudo-element may be used for "initial caps" and "drop

1970

caps", which are common typographical effects. This type of initial

1971

letter is similar to an inline-level element if its 'float' property

1972

is 'none'; otherwise, it is similar to a floated element.</p>

1973

1974

<p>In CSS, these are the properties that apply to <code>::first-letter</code>

1975

pseudo-elements: font properties, 'text-decoration', 'text-transform',

1976

'letter-spacing', 'word-spacing' (when appropriate), 'line-height',

1977

'float', 'vertical-align' (only if 'float' is 'none'), margin

1978

properties, padding properties, border properties, color property,

1979

background properties. UAs may apply other properties as well. To

1980

allow UAs to render a typographically correct drop cap or initial cap,

1981

the UA may choose a line-height, width and height based on the shape

1982

of the letter, unlike for normal elements.</p>

1983

1984

1985

<p>Example:</p>

1986

<p>This example shows a possible rendering of an initial cap. Note

1987

that the 'line-height' that is inherited by the <code>::first-letter</code>

1988

pseudo-element is 1.1, but the UA in this example has computed the

1989

height of the first letter differently, so that it doesn't cause any

1990

unnecessary space between the first two lines. Also note that the

1991

fictional start tag of the first letter is inside the <span>span</span>, and thus

1992

the font weight of the first letter is normal, not bold as the <span>span</span>:

1993

<pre>

1994

p { line-height: 1.1 }

1995

p::first-letter { font-size: 3em; font-weight: normal }

1996

span { font-weight: bold }

1997

...

1998

<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>

1999

Erbarremt over my en mijn benaeuwde vesten<br>

2000

En arme burgery, en op mijn volcx gebed<br>

2001

En dagelix geschrey de bange stad ontzet.

2002

</pre>

2003

2004

2005

</div>

2006

</div>

2007

2008

2009

<p>The following CSS will make a drop cap initial letter span about two lines:</p>

2010

2011

<pre>

2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

2013

<HTML>

2014

<HEAD>

2015

<TITLE>Drop cap initial letter</TITLE>

2016

2017

P { font-size: 12pt; line-height: 1.2 }

2018

P::first-letter { font-size: 200%; font-weight: bold; float: left }

2019

SPAN { text-transform: uppercase }

2020

</STYLE>

2021

</HEAD>

2022

<BODY>

2023

<P><SPAN>The first</SPAN> few words of an article

2024

in The Economist.</P>

2025

</BODY>

2026

</HTML>

2027

</pre>

2028

2029

<p>This example might be formatted as follows:</p>

2030

2031

2032

2033

</div>

2034

2035

<p>The <span class="index-inst" title="fictional tag

2036

sequence">fictional tag sequence</span> is:</p>

2037

2038

<pre>

2039

<P>

2040

<SPAN>

2041

<P::first-letter>

2042

T

2043

</P::first-letter>he first

2044

</SPAN>

2045

few words of an article in the Economist.

2046

</P>

2047

</pre>

2048

2049

<p>Note that the <code>::first-letter</code> pseudo-element tags abut

2050

the content (i.e., the initial character), while the ::first-line

2051

pseudo-element start tag is inserted right after the start tag of the

2052

block element.</p> </div>

2053

2054

<p>In order to achieve traditional drop caps formatting, user agents

2055

may approximate font sizes, for example to align baselines. Also, the

2056

glyph outline may be taken into account when formatting.</p>

2057

2058

<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),

2059

"close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)

2060

punctuation classes), that precedes or follows the first letter should

2061

be included. <a href="#refsUNICODE">[UNICODE]</a></p>

2062

2063

2064

<P><img src="first-letter2.gif" alt="Quotes that precede the

2065

first letter should be included."></p>

2066

</div>

2067

2068

<p>The <code>::first-letter</code> also applies if the first letter is

2069

in fact a digit, e.g., the "6" in "67 million dollars is a lot of

2070

money."</p>

2071

2072

<p>In CSS, the <code>::first-letter</code> pseudo-element applies to

2073

block, list-item, table-cell, table-caption, and inline-block

2074

elements. <span class="note">A future version of this specification

2075

may allow this pesudo-element to apply to more element

2076

types.</span></p>

2077

2078

<p>The <code>::first-letter</code> pseudo-element can be used with all

2079

such elements that contain text, or that have a descendant in the same

2080

flow that contains text. A UA should act as if the fictional start tag

2081

of the ::first-letter pseudo-element is just before the first text of

2082

the element, even if that first text is in a descendant.</p>

2083

2084

2085

<p>Example:</p>

2086

<p>The fictional tag sequence for this HTMLfragment:

2087

2088

<p>The first text.</pre>

2089

<p>is:

2090

2091

<p><div::first-letter><p::first-letter>T</...></...>he first text.</pre>

2092

</div>

2093

2094

<p>The first letter of a table-cell or inline-block cannot be the

2095

first letter of an ancestor element. Thus, in <code><DIV><P

2096

STYLE="display: inline-block">Hello<BR>Goodbye</P>

2097

etcetera</DIV></code> the first letter of the <code>div</code> is not the

2098

letter "H". In fact, the <code>div</code> doesn't have a first letter.

2099

2100

<p>The first letter must occur on the <a

2101

href="#first-formatted-line">first formatted line.</a> For example, in

2102

this fragment: <code><p&gt<br>First...</code> the first line

2103

doesn't contain any letters and <code>::first-letter</code> doesn't

2104

match anything (assuming the default style for <code>br</code> in HTML

2105

4). In particular, it does not match the "F" of "First."

2106

2107

<p>In CSS, if an element is a list item ('display: list-item'), the

2108

<code>::first-letter</code> applies to the first letter in the

2109

principal box after the marker. UAs may ignore

2110

<code>::first-letter</code> on list items with 'list-style-position:

2111

inside'. If an element has <code>::before</code> or

2112

<code>::after</code> content, the <code>::first-letter</code> applies

2113

to the first letter of the element <em>including</em> that content.

2114

2115

2116

<p>Example:</p>

2117

<p>After the rule 'p::before {content: "Note: "}', the selector

2118

'p::first-letter' matches the "N" of "Note".</p>

2119

</div>

2120

2121

<p>Some languages may have specific rules about how to treat certain

2122

letter combinations. In Dutch, for example, if the letter combination

2123

"ij" appears at the beginning of a word, both letters should be

2124

considered within the <code>::first-letter</code> pseudo-element.

2125

2126

<p>If the letters that would form the ::first-letter are not in the

2127

same element, such as "'T" in <code><p>'<em>T...</code>, the UA

2128

may create a ::first-letter pseudo-element from one of the elements,

2129

both elements, or simply not create a pseudo-element.</p>

2130

2131

<p>Similarly, if the first letter(s) of the block are not at the start

2132

of the line (for example due to bidirectional reordering), then the UA

2133

need not create the pseudo-element(s).

2134

2135

2136

<p>Example:</p>

2137

<p><a name="overlapping-example">The following example</a> illustrates

2138

how overlapping pseudo-elements may interact. The first letter of

2139

each P element will be green with a font size of '24pt'. The rest of

2140

the first formatted line will be 'blue' while the rest of the

2141

paragraph will be 'red'.</p>

2142

2143

<pre>p { color: red; font-size: 12pt }

2144

p::first-letter { color: green; font-size: 200% }

2145

p::first-line { color: blue }

2146

2147

<P>Some text that ends up on two lines</P></pre>

2148

2149

<p>Assuming that a line break will occur before the word "ends", the

2150

<span class="index-inst" title="fictional tag sequence">fictional tag

2151

sequence</span> for this fragment might be:</p>

2152

2153

2154

<P::first-line>

2155

<P::first-letter>

2156

S

2157

</P::first-letter>ome text that

2158

</P::first-line>

2159

ends up on two lines

2160

</P></pre>

2161

2162

<p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>

2163

element. Properties set on <code>::first-line</code> are inherited by

2164

<code>::first-letter</code>, but are overridden if the same property is set on

2165

<code>::first-letter</code>.</p>

2166

</div>

2167

2168

2169

<h4><a name=UIfragments>7.3.</a> <a name=selection>The ::selection pseudo-element</a></h4>

2170

2171

<p>The <code>::selection</code> pseudo-element applies to the portion

2172

of a document that has been highlighted by the user. This also

2173

applies, for example, to selected text within an editable text

2174

field. This pseudo-element should not be confused with the <code><a

2175

href="#checked">:checked</a></code> pseudo-class (which used to be

2176

named <code>:selected</code>)

2177

2178

<p>Although the <code>::selection</code> pseudo-element is dynamic in

2179

nature, and is altered by user action, it is reasonable to expect that

2180

when a UA re-renders to a static medium (such as a printed page, see

2181

<a href="#refsCSS21">[CSS21]</a>) which was originally rendered to a

2182

dynamic medium (like screen), the UA may wish to transfer the current

2183

<code>::selection</code> state to that other medium, and have all the

2184

appropriate formatting and rendering take effect as well. This is not

2185

required — UAs may omit the <code>::selection</code>

2186

pseudo-element for static media.

2187

2188

<p>These are the CSS properties that apply to <code>::selection</code>

2189

pseudo-elements: color, background, cursor (optional), outline

2190

(optional). The computed value of the 'background-image' property on

2191

<code>::selection</code> may be ignored.

2192

2193

2194

<h4><a name=gen-content>7.4. The ::before and ::after pseudo-elements</a></h4>

2195

2196

<p>The <code>::before</code> and <code>::after</code> pseudo-elements

2197

can be used to describe generated content before or after an element's

2198

content. They are explained in CSS 2.1 <a

2199

href="#refsCSS21">[CSS21]</a>.</p>

2200

2201

<p>When the <code>::first-letter</code> and <code>::first-line</code>

2202

pseudo-elements are combined with <code>::before</code> and

2203

<code>::after</code>, they apply to the first letter or line of the

2204

element including the inserted text.</p>

2205

2206

<h2><a name=combinators>8. Combinators</a></h2>

2207

2208

<h3><a name=descendant-combinators>8.1. Descendant combinator</a></h3>

2209

2210

<p>At times, authors may want selectors to describe an element that is

2211

the descendant of another element in the document tree (e.g., "an

2212

<code>EM</code> element that is contained within an <code>H1</code>

2213

element"). Descendant combinators express such a relationship. A

2214

descendant combinator is <a href="#whitespace">white space</a> that

2215

separates two sequences of simple selectors. A selector of the form

2216

"<code>A B</code>" represents an element <code>B</code> that is an

2217

arbitrary descendant of some ancestor element <code>A</code>.

2218

2219

2220

<p>Examples:</p>

2221

<p>For example, consider the following selector:</p>

2222

2223

<p>It represents an <code>em</code> element being the descendant of

2224

an <code>h1</code> element. It is a correct and valid, but partial,

2225

description of the following fragment:</p>

2226

<pre><h1>This <span class="myclass">headline

2227

is <em>very</em> important</span></h1></pre>

2228

<p>The following selector:</p>

2229

2230

<p>represents a <code>p</code> element that is a grandchild or later

2231

descendant of a <code>div</code> element. Note the whitespace on

2232

either side of the "*" is not part of the universal selector; the

2233

whitespace is a combinator indicating that the DIV must be the

2234

ancestor of some element, and that that element must be an ancestor

2235

of the P.</p>

2236

<p>The following selector, which combines descendant combinators and

2237

<a href="#attribute-selectors">attribute selectors</a>, represents an

2238

element that (1) has the <code>href</code> attribute set and (2) is

2239

inside a <code>p</code> that is itself inside a <code>div</code>:</p>

2240

2241

</div>

2242

2243

<h3><a name=child-combinators>8.2. Child combinators</a></h3>

2244

2245

<p>A <dfn>child combinator</dfn> describes a childhood relationship

2246

between two elements. A child combinator is made of the

2247

"greater-than sign" (<code>></code>) character and

2248

separates two sequences of simple selectors.

2249

2250

2251

2252

<p>Examples:</p>

2253

<p>The following selector represents a <code>p</code> element that is

2254

child of <code>body</code>:</p>

2255

2256

<p>The following example combines descendant combinators and child

2257

combinators.</p>

2258

2259

<p>It represents a <code>p</code> element that is a descendant of an

2260

<code>li</code> element; the <code>li</code> element must be the

2261

child of an <code>ol</code> element; the <code>ol</code> element must

2262

be a descendant of a <code>div</code>. Notice that the optional white

2263

space around the ">" combinator has been left out.</p>

2264

</div>

2265

2266

<p>For information on selecting the first child of an element, please

2267

see the section on the <code><a

2268

href="#structural-pseudos">:first-child</a></code> pseudo-class

2269

above.</p>

2270

2271

<h3><a name=sibling-combinators>8.3. Sibling combinators</a></h3>

2272

2273

<p>There are two different sibling combinators: the adjacent sibling

2274

combinator and the general sibling combinator. In both cases,

2275

non-element nodes (e.g. text between elements) are ignored when

2276

considering adjacency of elements.</p>

2277

2278

<h4><a name=adjacent-sibling-combinators>8.3.1. Adjacent sibling combinator</a></h4>

2279

2280

<p>The adjacent sibling combinator is made of the "plus

2281

sign" (U+002B, <code>+</code>) character that separates two

2282

sequences of simple selectors. The elements represented by the two

2283

sequences share the same parent in the document tree and the element

2284

represented by the first sequence immediately precedes the element

2285

represented by the second one.</p>

2286

2287

2288

<p>Examples:</p>

2289

<p>The following selector represents a <code>p</code> element

2290

immediately following a <code>math</code> element:</p>

2291

2292

<p>The following selector is conceptually similar to the one in the

2293

previous example, except that it adds an attribute selector — it

2294

adds a constraint to the <code>h1</code> element, that it must have

2295

<code>class="opener"</code>:</p>

2296

<pre>h1.opener + h2</pre>

2297

</div>

2298

2299

2300

<h4><a name=general-sibling-combinators>8.3.2. General sibling combinator</a></h4>

2301

2302

<p>The general sibling combinator is made of the "tilde"

2303

(U+007E, <code>~</code>) character that separates two sequences of

2304

simple selectors. The elements represented by the two sequences share

2305

the same parent in the document tree and the element represented by

2306

the first sequence precedes (not necessarily immediately) the element

2307

represented by the second one.</p>

2308

2309

2310

<p>Example:</p>

2311

2312

<p>represents a <code>pre</code> element following an <code>h1</code>. It

2313

is a correct and valid, but partial, description of:</p>

2314

<pre><h1>Definition of the function a</h1>

2315

<p>Function a(x) has to be applied to all figures in the table.</p>

2316

<pre>function a(x) = 12x/13.5</pre></pre>

2317

</div>

2318

2319

<h2><a name=specificity>9. Calculating a selector's specificity</a></h2>

2320

2321

<p>A selector's specificity is calculated as follows:</p>

2322

2323

<ul>

2324

<li>count the number of ID selectors in the selector (= a)</li>

2325

<li>count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)</li>

2326

<li>count the number of element names in the selector (= c)</li>

2327

<li>ignore pseudo-elements</li>

2328

</ul>

2329

2330

<p>Selectors inside <a href="#negation">the negation pseudo-class</a>

2331

are counted like any other, but the negation itself does not count as

2332

a pseudo-class.</p>

2333

2334

<p>Concatenating the three numbers a-b-c (in a number system with a

2335

large base) gives the specificity.</p>

2336

2337

2338

<p>Examples:</p>

2339

<pre>* /* a=0 b=0 c=0 -> specificity = 0 */

2340

LI /* a=0 b=0 c=1 -> specificity = 1 */

2341

UL LI /* a=0 b=0 c=2 -> specificity = 2 */

2342

UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */

2343

H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */

2344

UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */

2345

LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */

2346

#x34y /* a=1 b=0 c=0 -> specificity = 100 */

2347

#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

2348

</pre>

2349

</div>

2350

2351

<p class="note"><strong>Note:</strong> the specificity of the styles

2352

specified in an HTML <code>style</code> attribute is described in CSS

2353

2.1. <a href="#refsCSS21">[CSS21]</a>.</p>

2354

2355

<h2><a name=w3cselgrammar>10. The grammar of Selectors</a></h2>

2356

2357

<h3><a name=grammar>10.1. Grammar</a></h3>

2358

2359

<p>The grammar below defines the syntax of Selectors. It is globally

2360

LL(1) and can be locally LL(2) (but note that most UA's should not use

2361

it directly, since it doesn't express the parsing conventions). The

2362

format of the productions is optimized for human consumption and some

2363

shorthand notations beyond Yacc (see <a href="#refsYACC">[YACC]</a>)

2364

are used:</p>

2365

2366

<ul>

2367

<li><b>*</b>: 0 or more

2368

<li><b>+</b>: 1 or more

2369

<li><b>?</b>: 0 or 1

2370

<li><b>|</b>: separates alternatives

2371

<li><b>[ ]</b>: grouping </li>

2372

</ul>

2373

2374

<p>The productions are:</p>

2375

2376

<pre>selectors_group

2377

: selector [ COMMA S* selector ]*

2378

;

2379

2380

selector

2381

: simple_selector_sequence [ combinator simple_selector_sequence ]*

2382

;

2383

2384

combinator

2385

/* combinators can be surrounded by white space */

2386

: PLUS S* | GREATER S* | TILDE S* | S+

2387

;

2388

2389

simple_selector_sequence

2390

: [ type_selector | universal ]

2391

[ HASH | class | attrib | pseudo | negation ]*

2392

2393

;

2394

2395

type_selector

2396

: [ namespace_prefix ]? element_name

2397

;

2398

2399

namespace_prefix

2400

: [ IDENT | '*' ]? '|'

2401

;

2402

2403

element_name

2404

: IDENT

2405

;

2406

2407

universal

2408

: [ namespace_prefix ]? '*'

2409

;

2410

2411

class

2412

: '.' IDENT

2413

;

2414

2415

attrib

2416

: '[' S* [ namespace_prefix ]? IDENT S*

2417

[ [ PREFIXMATCH |

2418

SUFFIXMATCH |

2419

SUBSTRINGMATCH |

2420

'=' |

2421

INCLUDES |

2422

DASHMATCH ] S* [ IDENT | STRING ] S*

2423

]? ']'

2424

;

2425

2426

pseudo

2427

/* '::' starts a pseudo-element, ':' a pseudo-class */

2428

/* Exceptions: :first-line, :first-letter, :before and :after. */

2429

/* Note that pseudo-elements are restricted to one per selector and */

2430

/* occur only in the last simple_selector_sequence. */

2431

: ':' ':'? [ IDENT | functional_pseudo ]

2432

;

2433

2434

functional_pseudo

2435

: FUNCTION S* expression ')'

2436

;

2437

2438

expression

2439

/* In CSS3, the expressions are identifiers, strings, */

2440

/* or of the form "an+b" */

2441

2442

;

2443

2444

negation

2445

: NOT S* negation_arg S* ')'

2446

;

2447

2448

negation_arg

2449

2450

;</pre>

2451

2452

2453

<h3><a name=lex>10.2. Lexical scanner</a></h3>

2454

2455

<p>The following is the <a name=x3>tokenizer</a>, written in Flex (see

2456

<a href="#refsFLEX">[FLEX]</a>) notation. The tokenizer is

2457

case-insensitive.</p>

2458

2459

<p>The two occurrences of "\377" represent the highest character

2460

number that current versions of Flex can deal with (decimal 255). They

2461

should be read as "\4177777" (decimal 1114111), which is the highest

2462

possible code point in Unicode/ISO-10646. <a

2463

href="#refsUNICODE">[UNICODE]</a></p>

2464

2465

<pre>%option case-insensitive

2466

2467

ident [-]?{nmstart}{nmchar}*

2468

name {nmchar}+

2469

nmstart [_a-z]|{nonascii}|{escape}

2470

nonascii [^\0-\177]

2471

unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?

2472

escape {unicode}|\\[^\n\r\f0-9a-f]

2473

nmchar [_a-z0-9-]|{nonascii}|{escape}

2474

num [0-9]+|[0-9]*\.[0-9]+

2475

string {string1}|{string2}

2476

string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"

2477

string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'

2478

invalid {invalid1}|{invalid2}

2479

invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*

2480

invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*

2481

nl \n|\r\n|\r|\f

2482

w [ \t\r\n\f]*

2483

2484

%%

2485

2486

[ \t\r\n\f]+ return S;

2487

2488

"~=" return INCLUDES;

2489

"|=" return DASHMATCH;

2490

"^=" return PREFIXMATCH;

2491

"$=" return SUFFIXMATCH;

2492

"*=" return SUBSTRINGMATCH;

2493

{ident} return IDENT;

2494

{string} return STRING;

2495

{ident}"(" return FUNCTION;

2496

{num} return NUMBER;

2497

"#"{name} return HASH;

2498

{w}"+" return PLUS;

2499

{w}">" return GREATER;

2500

{w}"," return COMMA;

2501

{w}"~" return TILDE;

2502

":not(" return NOT;

2503

@{ident} return ATKEYWORD;

2504

{invalid} return INVALID;

2505

{num}% return PERCENTAGE;

2506

{num}{ident} return DIMENSION;

2507

"<!--" return CDO;

2508

"-->" return CDC;

2509

2510

"url("{w}{string}{w}")" return URI;

2511

"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")" return URI;

2512

U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})? return UNICODE_RANGE;

2513

2514

\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */

2515

2516

. return *yytext;</pre>

2517

2518

2519

2520

<h2><a name=downlevel>11. Namespaces and down-level clients</a></h2>

2521

2522

<p>An important issue is the interaction of CSS selectors with XML

2523

documents in web clients that were produced prior to this

2524

document. Unfortunately, due to the fact that namespaces must be

2525

matched based on the URI which identifies the namespace, not the

2526

namespace prefix, some mechanism is required to identify namespaces in

2527

CSS by their URI as well. Without such a mechanism, it is impossible

2528

to construct a CSS style sheet which will properly match selectors in

2529

all cases against a random set of XML documents. However, given

2530

complete knowledge of the XML document to which a style sheet is to be

2531

applied, and a limited use of namespaces within the XML document, it

2532

is possible to construct a style sheet in which selectors would match

2533

elements and attributes correctly.</p>

2534

2535

<p>It should be noted that a down-level CSS client will (if it

2536

properly conforms to CSS forward compatible parsing rules) ignore all

2537

<code>@namespace</code> at-rules, as well as all style rules that make

2538

use of namespace qualified element type or attribute selectors. The

2539

syntax of delimiting namespace prefixes in CSS was deliberately chosen

2540

so that down-level CSS clients would ignore the style rules rather

2541

than possibly match them incorrectly.</p>

2542

2543

<p>The use of default namespaces in CSS makes it possible to write

2544

element type selectors that will function in both namespace aware CSS

2545

clients as well as down-level clients. It should be noted that

2546

down-level clients may incorrectly match selectors against XML

2547

elements in other namespaces.</p>

2548

2549

<p>The following are scenarios and examples in which it is possible to

2550

construct style sheets which would function properly in web clients

2551

that do not implement this proposal.</p>

2552

2553

<ol>

2554

<li>

2555

2556

<p>The XML document does not use namespaces.</p>

2557

2558

<ul>

2559

2560

<li>In this case, it is obviously not necessary to declare or use

2561

namespaces in the style sheet. Standard CSS element type and

2562

attribute selectors will function adequately in a down-level

2563

client.</li>

2564

2565

<li>In a CSS namespace aware client, the default behavior of

2566

element selectors matching without regard to namespace will

2567

function properly against all elements, since no namespaces are

2568

present. However, the use of specific element type selectors that

2569

match only elements that have no namespace ("<code>|name</code>")

2570

will guarantee that selectors will match only XML elements that do

2571

not have a declared namespace. </li>

2572

2573

</ul>

2574

2575

</li>

2576

2577

<li>

2578

2579

<p>The XML document defines a single, default namespace used

2580

throughout the document. No namespace prefixes are used in element

2581

names.</p>

2582

2583

<ul>

2584

2585

<li>In this case, a down-level client will function as if

2586

namespaces were not used in the XML document at all. Standard CSS

2587

element type and attribute selectors will match against all

2588

elements. </li>

2589

2590

</ul>

2591

2592

</li>

2593

2594

<li>

2595

2596

<p>The XML document does <b>not</b> use a default namespace, all

2597

namespace prefixes used are known to the style sheet author, and

2598

there is a direct mapping between namespace prefixes and namespace

2599

URIs. (A given prefix may only be mapped to one namespace URI

2600

throughout the XML document; there may be multiple prefixes mapped

2601

to the same URI).</p>

2602

2603

<ul>

2604

2605

<li>In this case, the down-level client will view and match

2606

element type and attribute selectors based on their fully

2607

qualified name, not the local part as outlined in the <a

2608

href="#typenmsp">Type selectors and Namespaces</a> section. CSS

2609

selectors may be declared using an escaped colon "<code>\:</code>"

2610

to describe the fully qualified names, e.g.

2611

"<code>html\:h1</code>" will match

2612

<code><html:h1></code>. Selectors using the qualified name

2613

will only match XML elements that use the same prefix. Other

2614

namespace prefixes used in the XML that are mapped to the same URI

2615

will not match as expected unless additional CSS style rules are

2616

declared for them.</li>

2617

2618

<li>Note that selectors declared in this fashion will

2619

<em>only</em> match in down-level clients. A CSS namespace aware

2620

client will match element type and attribute selectors based on

2621

the name's local part. Selectors declared with the fully

2622

qualified name will not match (unless there is no namespace prefix

2623

in the fully qualified name).</li>

2624

2625

</ul>

2626

2627

</li>

2628

2629

</ol>

2630

2631

<p>In other scenarios: when the namespace prefixes used in the XML are

2632

not known in advance by the style sheet author; or a combination of

2633

elements with no namespace are used in conjunction with elements using

2634

a default namespace; or the same namespace prefix is mapped to

2635

<em>different</em> namespace URIs within the same document, or in

2636

different documents; it is impossible to construct a CSS style sheet

2637

that will function properly against all elements in those documents,

2638

unless, the style sheet is written using a namespace URI syntax (as

2639

outlined in this document or similar) and the document is processed by

2640

a CSS and XML namespace aware client.</p>

2641

2642

<h2><a name=profiling>12. Profiles</a></h2>

2643

2644

<p>Each specification using Selectors must define the subset of W3C

2645

Selectors it allows and excludes, and describe the local meaning of

2646

all the components of that subset.</p>

2647

2648

<p>Non normative examples:

2649

2650

2651

2652

<tbody>

2653

<tr>

2654

<th class="title" colspan=2>Selectors profile</th></tr>

2655

<tr>

2656

<th>Specification</th>

2657

<td>CSS level 1</td></tr>

2658

<tr>

2659

<th>Accepts</th>

2660

<td>type selectors<br>class selectors<br>ID selectors<br>:link,

2661

:visited and :active pseudo-classes<br>descendant combinator

2662

<br>::first-line and ::first-letter pseudo-elements</td></tr>

2663

<tr>

2664

<th>Excludes</th>

2665

<td>

2666

2667

<p>universal selector<br>attribute selectors<br>:hover and :focus

2668

pseudo-classes<br>:target pseudo-class<br>:lang() pseudo-class<br>all UI

2669

element states pseudo-classes<br>all structural

2670

pseudo-classes<br>negation pseudo-class<br>all

2671

UI element fragments pseudo-elements<br>::before and ::after

2672

pseudo-elements<br>child combinators<br>sibling combinators

2673

2674

<p>namespaces</td></tr>

2675

<tr>

2676

<th>Extra constraints</th>

2677

<td>only one class selector allowed per sequence of simple

2678

selectors</td></tr></tbody></table><br><br>

2679

2680

<tbody>

2681

<tr>

2682

<th class="title" colspan=2>Selectors profile</th></tr>

2683

<tr>

2684

<th>Specification</th>

2685

<td>CSS level 2</td></tr>

2686

<tr>

2687

<th>Accepts</th>

2688

<td>type selectors<br>universal selector<br>attribute presence and

2689

values selectors<br>class selectors<br>ID selectors<br>:link, :visited,

2690

:active, :hover, :focus, :lang() and :first-child pseudo-classes

2691

<br>descendant combinator<br>child combinator<br>adjacent sibling

2692

combinator<br>::first-line and ::first-letter pseudo-elements<br>::before

2693

and ::after pseudo-elements</td></tr>

2694

<tr>

2695

<th>Excludes</th>

2696

<td>

2697

2698

<p>content selectors<br>substring matching attribute

2699

selectors<br>:target pseudo-classes<br>all UI element

2700

states pseudo-classes<br>all structural pseudo-classes other

2701

than :first-child<br>negation pseudo-class<br>all UI element

2702

fragments pseudo-elements<br>general sibling combinators

2703

2704

<p>namespaces</td></tr>

2705

<tr>

2706

<th>Extra constraints</th>

2707

<td>more than one class selector per sequence of simple selectors (CSS1

2708

constraint) allowed</td></tr></tbody></table>

2709

2710

<p>In CSS, selectors express pattern matching rules that determine which style

2711

rules apply to elements in the document tree.

2712

2713

<p>The following selector (CSS level 2) will <b>match</b> all anchors <code>a</code>

2714

with attribute <code>name</code> set inside a section 1 header <code>h1</code>:

2715

2716

2717

<p>All CSS declarations attached to such a selector are applied to elements

2718

matching it. </div>

2719

2720

2721

2722

<tbody>

2723

<tr>

2724

<th class="title" colspan=2>Selectors profile</th></tr>

2725

<tr>

2726

<th>Specification</th>

2727

2728

</tr>

2729

<tr>

2730

<th>Accepts</th>

2731

<td>

2732

2733

<p>type selectors<br>universal selectors<br>attribute selectors<br>class

2734

selectors<br>ID selectors<br>all structural pseudo-classes<br>

2735

all combinators

2736

2737

<p>namespaces</td></tr>

2738

<tr>

2739

<th>Excludes</th>

2740

<td>non-accepted pseudo-classes<br>pseudo-elements<br></td></tr>

2741

<tr>

2742

<th>Extra constraints</th>

2743

<td>some selectors and combinators are not allowed in fragment

2744

descriptions on the right side of STTS declarations.</td></tr></tbody></table>

2745

2746

<p>Selectors can be used in STTS 3 in two different

2747

manners:

2748

<ol>

2749

<li>a selection mechanism equivalent to CSS selection mechanism: declarations

2750

attached to a given selector are applied to elements matching that selector,

2751

<li>fragment descriptions that appear on the right side of declarations.

2752

</li></ol></div>

2753

2754

<h2><a name=Conformance></a>13. Conformance and requirements</h2>

2755

2756

<p>This section defines conformance with the present specification only.

2757

2758

<p>The inability of a user agent to implement part of this specification due to

2759

the limitations of a particular device (e.g., non interactive user agents will

2760

probably not implement dynamic pseudo-classes because they make no sense without

2761

interactivity) does not imply non-conformance.

2762

2763

<p>All specifications reusing Selectors must contain a <a

2764

href="#profiling">Profile</a> listing the

2765

subset of Selectors it accepts or excludes, and describing the constraints

2766

it adds to the current specification.

2767

2768

<p>Invalidity is caused by a parsing error, e.g. an unrecognized token or a token

2769

which is not allowed at the current parsing point.

2770

2771

<p>User agents must observe the rules for handling parsing errors:

2772

<ul>

2773

<li>a simple selector containing an undeclared namespace prefix is invalid</li>

2774

<li>a selector containing an invalid simple selector, an invalid combinator

2775

or an invalid token is invalid. </li>

2776

<li>a group of selectors containing an invalid selector is invalid.</li>

2777

</ul>

2778

2779

<p>Specifications reusing Selectors must define how to handle parsing

2780

errors. (In the case of CSS, the entire rule in which the selector is

2781

used is dropped.)</p>

2782

2783

<!-- Apparently all these references are out of date:

2784

<p>Implementations of this specification must behave as

2785

"recipients of text data" as defined by <a href="#refsCWWW">[CWWW]</a>

2786

when parsing selectors and attempting matches. (In particular,

2787

implementations must assume the data is normalized and must not

2788

normalize it.) Normative rules for matching strings are defined in

2789

<a href="#refsCWWW">[CWWW]</a> and <a

2790

href="#refsUNICODE">[UNICODE]</a> and apply to implementations of this

2791

specification.</p>-->

2792

2793

<h2><a name=Tests></a>14. Tests</h2>

2794

2795

<p>This specification has <a

2796

href="http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">a test

2797

suite</a> allowing user agents to verify their basic conformance to

2798

the specification. This test suite does not pretend to be exhaustive

2799

and does not cover all possible combined cases of Selectors.</p>

2800

2801

<h2><a name=ACKS></a>15. Acknowledgements</h2>

2802

2803

<p>The CSS working group would like to thank everyone who has sent

2804

comments on this specification over the years.</p>

2805

2806

<p>The working group would like to extend special thanks to Donna

2807

McManus, Justin Baker, Joel Sklar, and Molly Ives Brower who perfermed

2808

the final editorial review.</p>

2809

2810

<h2><a name=references>16. References</a></h2>

2811

2812

2813

2814

<dt>[CSS1]

2815

<dd><a name=refsCSS1></a> Bert Bos, Håkon Wium Lie; "<cite>Cascading Style Sheets, level 1</cite>", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999

2816

<dd>(<code><a href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a></code>)

2817

2818

<dt>[CSS21]

2819

<dd><a name=refsCSS21></a> Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, editors; "<cite>Cascading Style Sheets, level 2 revision 1</cite>", W3C Working Draft, 13 June 2005

2820

<dd>(<code><a href="http://www.w3.org/TR/CSS21">http://www.w3.org/TR/CSS21</a></code>)

2821

2822

<dt>[CWWW]

2823

<dd><a name=refsCWWW></a> Martin J. Dürst, François Yergeau, Misha Wolf, Asmus Freytag, Tex Texin, editors; "<cite>Character Model for the World Wide Web</cite>", W3C Recommendation, 15 February 2005

2824

<dd>(<code><a href="http://www.w3.org/TR/charmod/">http://www.w3.org/TR/charmod/</a></code>)

2825

2826

<dt>[FLEX]

2827

<dd><a name="refsFLEX"></a> "<cite>Flex: The Lexical Scanner Generator</cite>", Version 2.3.7, ISBN 1882114213

2828

2829

<dt>[HTML4]

2830

<dd><a name="refsHTML4"></a> Dave Ragget, Arnaud Le Hors, Ian Jacobs, editors; "<cite>HTML 4.01 Specification</cite>", W3C Recommendation, 24 December 1999

2831

<dd>(<a href="http://www.w3.org/TR/html4/"><code>http://www.w3.org/TR/html4/</code></a>)

2832

2833

<dt>[MATH]

2834

<dd><a name="refsMATH"></a> Patrick Ion, Robert Miner, editors; "<cite>Mathematical Markup Language (MathML) 1.01</cite>", W3C Recommendation, revision of 7 July 1999

2835

<dd>(<code><a href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML/</a></code>)

2836

2837

<dt>[RFC3066]

2838

<dd><a name="refsRFC3066"></a> H. Alvestrand; "<cite>Tags for the Identification of Languages</cite>", Request for Comments 3066, January 2001

2839

<dd>(<a href="http://www.ietf.org/rfc/rfc3066.txt"><code>http://www.ietf.org/rfc/rfc3066.txt</code></a>)

2840

2841

<dt>[STTS]

2842

<dd><a name=refsSTTS></a> Daniel Glazman; "<cite>Simple Tree Transformation Sheets 3</cite>", Electricité de France, submission to the W3C, 11 November 1998

2843

<dd>(<code><a href="http://www.w3.org/TR/NOTE-STTS3">http://www.w3.org/TR/NOTE-STTS3</a></code>)

2844

2845

<dt>[SVG]

2846

<dd><a name="refsSVG"></a> Jon Ferraiolo, 藤沢 淳, Dean Jackson, editors; "<cite>Scalable Vector Graphics (SVG) 1.1 Specification</cite>", W3C Recommendation, 14 January 2003

2847

<dd>(<code><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></code>)

2848

2849

<dt>[UNICODE]</dt>

2850

<dd><a name="refsUNICODE"></a> <cite><a

2851

href="http://www.unicode.org/versions/Unicode4.1.0/">The Unicode Standard, Version 4.1</a></cite>, The Unicode Consortium. Boston, MA, Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by <a href="http://www.unicode.org/versions/Unicode4.0.1/">Unicode 4.0.1</a> and <a href="http://www.unicode.org/versions/Unicode4.1.0/">Unicode 4.1.0</a>.

2852

<dd>(<code><a href="http://www.unicode.org/versions/">http://www.unicode.org/versions/</a></code>)</dd>

2853

2854

<dt>[XML10]

2855

<dd><a name="refsXML10"></a> Tim Bray, Jean Paoli, C. M. Sperberg-McQueen, Eve Maler, François Yergeau, editors; "<cite>Extensible Markup Language (XML) 1.0 (Third Edition)</cite>", W3C Recommendation, 4 February 2004

2856

<dd>(<a href="http://www.w3.org/TR/REC-xml/"><code>http://www.w3.org/TR/REC-xml/</code></a>)

2857

2858

<dt>[XMLNAMES]

2859

<dd><a name="refsXMLNAMES"></a> Tim Bray, Dave Hollander, Andrew Layman, editors; "<cite>Namespaces in XML</cite>", W3C Recommendation, 14 January 1999

2860

<dd>(<a href="http://www.w3.org/TR/REC-xml-names/"><code>http://www.w3.org/TR/REC-xml-names/</code></a>)

2861

2862

<dt>[YACC]

2863

<dd><a name="refsYACC"></a> S. C. Johnson; "<cite>YACC — Yet another compiler compiler</cite>", Technical Report, Murray Hill, 1975

2864

2865

</dl>

b'\\ No newline at end of file'