4. definition
EPUB defines a means of representing, packaging and encoding
structured and semantically enhanced Web content
— including HTML5, CSS, SVG, images, and other resources — for
distribution in a single-file format.
13. Media Queries
HTML 4
<link rel="stylesheet" media="screen and (color)" href="example.css" />
CSS 3
@import url(color.css) screen and (color);
Other examples:
@media (orientation: portrait) { … }
@media (min-width:500px) { … }
14. Selectors
You already know:
a:link /* unvisited links */
a:visited /* visited links */
a:hover /* user hovers */
a:active /* active links */
An example of combining dynamic pseudo-classes:
a:focus
a:focus:hover
15. Selectors
The ::before and ::after pseudo-elements
h1:before { content : "> " }
Structural pseudo-classes
tr:nth-child(odd) /* represents every odd row of an HTML table */
tr:nth-child(even) /* represents every even row of an HTML table */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
16. Selectors
div > p:first-child
This selector represents a p element that is the first child of a div element:
<p> The last P before the note.</p>
<div class="note">
<p> The first P inside the note.</p>
</div>
but cannot represent the second p in the following fragment:
<p> The last P before the note.</p>
<div class="note">
<h2> Note </h2>
<p> The first P inside the note.</p>
</div>
17. Selectors
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
<P>A bird in the hand is worth two in the bush...</P>
18. Combinators
Descendant combinator E F (1) — matches an element F that’s a descendant of an
element E. Note that descendant combinators target all descendants and not just
direct children.
ul li {background: red;}
<ul>
<li>List Item 1</li>
<li>List Item 2
<ol>
<li>List Item 2-1</li>
<li>List Item 2-2</li>
</ol>
</li>
<li>List Item 3</li>
</ul>
19. Combinators
Child combinator E > F (2) — matches an element F that’s a child of an element E.
The difference here is that F must be a direct child of E.
ul>li {background: red;}
<ul>
<li>List Item 1</li>
<li>List Item 2
<ol>
<li>List Item 2-1</li>
<li>List Item 2-2</li>
</ol>
</li>
<li>List Item 3</li>
</ul>
20. Combinators
Adjacent sibling combinator E + F (2) — matches an element F immediately preceded by
an element E. Note the word adjacent. Only the first element F after E will be
targeted.
h1+p {background: red;}
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
21. Combinators
General sibling combinator E ~ F (3) — matches an element F preceded by an element
E. Unlike the above this will match any sibling and not just the first.
h1+p {background: red;}
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
