CHAPTER 6
INTRODUCING CSS3
New Element Styling html5shiv.js provided support in older IE
browsers for new sectioning elementsaside, header, footer, article, etc.
We still need to make these render as block elements instead of inline elements (which is the default)
article, aside, figure, … {
display:block;
}
CSS3 Selectors
Relational Selectors article time
Descendant – time element within article element
article > timeChild – time element is an immediate child of an
article element article + time
Adjacent sibling – time element and article element share the same parent and the time element immediately follows the article element
Relational Selectors
article ~ timeGeneral sibling – time element and article
element share the same parent and time element appears anywhere after the article element
What Does It Select?
li + liEvery element in a list except the first one
.clock timetime elements within an element using
class=“clock” #main > article
article elements that are direct
children of an element with the
id=“main”
Attribute Selectors
video[src]Matches any video element with a src
attribute (regardless of its value) audio[preload=“auto”]
Matches any audio element with a preload attribute set to “auto”
p[lang|=“en”]Matches any p element with a lang attribute
equal to “en” or starting with “en-”
Attribute Selectors
div[class~=“fancy”]Matches any div element with a class
attribute including the whole word “fancy” article[id^=“news”]
Matches any article element containing an id that starts with “news”
article[id$=“news”]Matches any article element containing an id
that ends with “news”
Attribute Selectors
article[id*=“news”]Matches any article element with the text
“news” appearing within its id attribute
What Does It Select?
time[data-autofill]Any time element with the custom attribute
data-autofill article[class|=“playlist-entry”]
Any article element with a class that equals “playlist-entry” or starts “playlist-entry-”
[class~=“banner-ad”]Any element with the “banner-ad”
class
Pseudo-class Selectors
:enabled :disabled :checked :indeterminate :target (# anchor target in url) :default (among a set of elements) :valid (based on type/pattern attributes) :invalid (empty or invalid form elements)
Pseudo-class Selectors
:in-range (elements w/ min/max values) :out-of-range :required (form controls) :optional (non-required form controls) :read-only (not user alterable) :read-write (user alterable)
What Does It Select?
time[data-autofill]Any time element with the custom attribute
data-autofill article[class|=“playlist-entry”]
Any article element with a class that equals “playlist-entry” or starts “playlist-entry-”
[class~=“banner-ad”]Any element with the “banner-ad”
class
Structural Pseudo-classes :root (the html element) ul li:nth-child(3)
Matches every li element that is the third child of a ul parent
ul li:nth-last-child(2)Matches the next to last li element that is a
child of a ul parent article:nth-of-type(5)
Matches the fifth article element within any parent element
Structural Pseudo-classes article:nth-last-of-type(2)
Matches the next to last article element within any parent element
:first-child :last-child :first-of-type :last-of-type :only-child
Structural Pseudo-classes div:empty
Matches any div element that has no child elements
p:lang(fr)Matches any p element in a language
denoted by the “fr” abbreviation :not(:disabled)
Matches all elements that are not disabled
What is “n”?
ul > li:nth-child(2n)Matches every other li element that is an
immediate child of a ul element ul > li:nth-child(2n+1)
Matches every other li element that is an immediate child of a ul element, but offset by one
Pseudo-elements
Pseudo-classes target element attributes and states
Pseudo-elements target text that part of the document but not accessible as part of the document tree
Pseudo-elements are targeted with a double colon (::) instead of a single colon (:)
Text Nodes
All text nodes have a first letter and first line::first-letter::first-line
Make the first line of the paragraph
red. Double the size of the first
letter.
Selected Text
The page can have selected elements::selection::-moz-selection (Firefox)
Make selected text white.
Generating Content
Pseudo-elements can be used to insert content into a document::before::after
Add a PDF icon after a link. Insert “(PDF)” text after the
anchor content.
CSS3 Colors
Pre-CSS3 Colors
The color red could be expressed as:#f00#ff0000rgb(255, 0, 0)rgb(100%, 0%, 0%)red
CSS3 Color Additions
More color keywordsblanchedalmond, cornflowerblue,
mediumseagreen RGBA support adds alpha value to
specify the color’s opacityrgba(255, 0, 0, 0.4) – red, 40% opaque
Make standard text at 40%,
but selected text at 100%
CSS3 Color Additions
HSL, HSLAHue, saturation, lightness (and alpha)Hue is an integer valueSaturation and lightness are percentages
http://www.workwithcolor.com/
CSS3 Color Additions opacity can also be set as a CSS property to adjust the
transparency of elements on the page
div.halfopaque {
color: black;
background-color: rgb(255, 0, 0);
opacity: 0.5;
}
div.halfalpha {
color: black;
background-color: rgba(255, 0, 0, 0.5);
}
Border Radius
Rounded corners can be specified on one or more corners of an element
border-radius: 25px;
border-radius: 10px 10px 5px 5px;
border-top-left-radius: 10px;
border-radius: 20px / 10px;
Drop Shadows Drop shadows can be added to any element
box-shadow: [inset] horz vert blur
spread color;
IE6-IE8 uses a plug-in filter (see text) Multiple shadows can be separated by
commas Shadows follow element edges
Text Shadows
Shadows can also be added to text content
text-shadow: top left blur color;
Ad Styling
Let’s try to add the CSS necessary to style the “Wanted” ad
border-radius box-shadow text-shadow