Neal Stublen

New Element Styling  html5shiv.js provided support in older IE browsers for new sectioning elements aside, 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; }

Relational Selectors  article time Descendant – time element within article element  article > time Child – 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 ~ time General sibling – time element and article element share the same parent and time element appears anywhere after the article element

What Does It Select?  li + li Every element in a list except the first one .clock time time 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.

Pre-CSS3 Colors  The color red could be expressed as: #f00 #ff0000 rgb(255, 0, 0) rgb(100%, 0%, 0%) red

CSS3 Color Additions  More color keywords blanchedalmond, cornflowerblue, mediumseagreen  RGBA support adds alpha value to specify the color’s opacity rgba(255, 0, 0, 0.4) – red, 40% opaque  Make standard text at 40%, but selected text at 100%

CSS3 Color Additions  HSL, HSLA Hue, saturation, lightness (and alpha) Hue is an integer value Saturation and lightness are percentages 

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