css selectors
TRANSCRIPT
Rachel Andrew: ConFoo 2015
CSS Selectors
what do we mean by CSS3?
CSS3 is Modular
CSS3 doesn’t really exist …
• Editor’s Draft
• Working Draft
• Candidate Recommendation
• Proposed Recommendation
• W3C Recommendation
W3C Maturity Levels
• W3C Recommendation
• http://www.w3.org/TR/selectors/
Selectors module Level 3
Selectors Module Level 4
• Latest Editor’s Draft 4 February 2015
• http://dev.w3.org/csswg/selectors-4/
h1 {}
p {}
.thing {}
#uniquething {}
.thing p
Basic Selectors
The problem with CSS2 selectors
<h1>My heading</h1>
<p class="first"> ... </p>
<p> ... </p>
Adding classes
Level 3 Selectors
“Common sense” new selectors
target elements more precisely without adding classes
Select elements based on attributes
Attribute Selectors
form input[type="text"] {
} form input[type="submit"] { }
Attribute Selectors
Attribute Selectors
label[for="fContact"] { float: none; width: auto; }
Attribute Selectors
a[href ^="mailto:"] { padding-right: 20px; background-image:url(email.png); background-repeat: no-repeat; background-position: right center; }
Attribute Selectors
Selecting of elements depending on their position
Structural pseudo-class selectors
What is a pseudo-class?
A pseudo-class selector acts as if you have added a class to an element in the HTML mark-up.
a:link {} a:visited {}
Pseudo-Class Selectors
a:hover {} a:active {}
Dynamic Pseudo-Class
target an element when it is the first child of a parent element
:first-child
<div class="wrapper"> <p> ... </p> <p> ... </p> <p> ... </p> </div>
:first-child
:first-child
.wrapper p { font-size: 1.5em; }
:first-child
.wrapper p:first-child { font-size: 1.5em; }
:first-child
:first-child
Pseudo-classes
To target an element with our pseudo-class we append the pseudo-class to the selector:
p:first-child
li:first-child
.classname:first-child
target an element when it is the last child of a parent element
:last-child
:last-child
.navigation li:last-child { border-bottom: none; }
:last-child
:last-child
select multiple elements according to their position in the document tree
:nth-child
:nth-child
tr:nth-child(odd) td { background-color: #f0e9c5; }
:nth-child
:nth-child
tr:nth-child(3) td { background-color: #f0e9c5; }
:nth-child
:nth-child
http://css-tricks.com/how-nth-child-works/
tr:nth-child(2n+1) td { background-color: #f0e9c5; }
:nth-child 2n+1 is the same as odd.
select multiple elements according to their position in the document tree BUT only those elements that are the same as the type the rule is applied to.
:nth-of-type
p:nth-of-type(odd) { background-color: #f0e9c5; }
:nth-of-type
:nth-of-type
matches an element if it is the only child element of it’s parent.
:only-child
li { list-style-type: disc; } li:only-child { list-style-type: none; }
:only-child
:only-child
matches an element if it is empty
:empty
p { padding: 0 0 1em 0; margin: 0; } p:empty { padding: 0; }
:empty
pseudo-classes for use with forms.
UI Element States
the checked state of a checkbox or radio button
:checked
.agreeterms:checked { border:2px solid blue; }
:checked
detecting input element states
enabled and disabled
input:enabled { color: #000; }
:enabled
input:disabled { color: #999; }
:disabled
http://dev.w3.org/csswg/css-ui-3/ (latest editor’s draft)
The CSS3 Basic User Interface Module
:default:valid :invalid :in-range :out-of-range :required :optional :read-only :read-write
CSS3 User Interface Module
<input type="text" name="fName" id="fName" required="required" /> <input type="email" name="fEmail" id="fEmail" required="required" placeholder="[email protected]" />
HTML5 attributes
input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to required fields
Adding an icon to required fields
input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }
Adding an icon to valid fields
Adding an icon to valid fields
input[type="email"]:focus:required:invalid { background-image: url(email_error.png); }
Show a different icon for the field type
Show a different icon for the field type
:not(selector)
the Negation pseudo-class
<p> ... </p> <p class="box"> ... </p> <p> ... </p>
:not
p:not(.box) { padding: 1em; border:2px solid #000; }
:not
:not
matching virtual elements that don’t explicitly exist in the document tree
Pseudo-elements
What is a pseudo-element?
Pseudo-element selectors act as if a new element, such as a span, was added to your document and then the style applied to that.
the first character of the first line of text
:first-letter
.wrapper:first-letter { font-size: 200%; font-weight: bold; color: red; }
:first-letter
:first-letter
the first formatted line of text
:first-line
.wrapper:first-line { font-size: 200%; font-weight: bold; color: red; }
:first-line
:first-line
Render content before the element when using generated content
:before
<div class="content"> ... </div>
:before
.content:before { content: "Start here:"; }
:before
:before
Render content after the element when using generated content
:after
.content:after { content: "End here:"; }
:after
Generated content can be very useful...
CSS Arrow Please
.clr:after { content: ""; display: table; clear: both; }
Clear Fix
Generated Content is used in ebook creation.
@page:right{ @bottom-left { margin: 10pt 0 30pt 0; content: "My Book Title"; font-size: 8pt; color: #000; } }
Combining selectors to target elements
Combinators
Select all elements that are descendants of a specified parent
Descendant Selector
.wrapper p { font-size: 1.5em; }
Descendant Selector
Select all elements that are immediate children of a specified parent
Child Selector
<ul> <li>Item 1 <ol> <li>Sub list item 1</li> <li>Sub list item 2</li> </ol> </li> <li>Item 2</li> </ul>
Child Selector
li { color: #000; } ul > li { color: red; }
Child Selector
Child Selector
Select elements that are the adjacent siblings of an element
Adjacent Sibling
.wrapper h1 + p { font-size: 1.5em; }
Adjacent Sibling
Adjacent Sibling
Select elements that are the siblings of an element
General Sibling
.wrapper h2~p { color: red; }
General Sibling
General Sibling
Browser Support
Browser Support
or serve a simpler layout to older browsers
Do Nothing.
plugging the holes in support
CSS “PolyFills”
A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
http://remysharp.com/2010/10/08/what-is-a-polyfill/
What is a polyfill?
Check your stats.
Selectors Level 4a look to the near future with “CSS4 Selectors”
the Negation Pseudo-class
:not gets an upgrade in Level 4
:not
Level 4 enables the passing of multiple selectors to :not
p:not(.excerpt, .intro) { font-weight: normal; }
The Matches pseudo-class
Applying rules to groups of selectors.
:matches
p:matches(.alert,.error,.warn) { color: red; }
Time Dimensional Pseudo-classes
Defines :current :past and :future - useful to show progress through a document, for example when displaying subtitles.
:current :past
p:current { color: blue; }
p:past { color: #999; }
Grid Structural Selectors
Column Combinator
Pseudo-classes:
:nth-column, :nth-last-column
Column Combinator
The column combinator, which consists of two pipes (||) represents the relationship of a column element to a cell element belonging to the column it represents.
Column Combinator col.totals || td {
background: #333; color: #fff; font-weight: bold; }
<table> <col span="2"> <col class="totals"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>3</td> <td>3</td> <td>6</td> </tr> </table>
nth-column, nth-last-column
Selects the table cells inside a column according to the columns selected by nth-column or nth-last-column.
Grid Structural Pseudo-Classes
:nth-column(even) { background: blue; }
Selector Profiles
• CSS Selectors Level 4 introduces selector profiles
• The fast profile is suitable for all contexts, including in browser processing
• The complete profile is for things that can be used when performance isn’t an issue
• http://dev.w3.org/csswg/selectors-4/#profiles
The has() selector
• Currently the only selector not available in the fast profile.
• This may change as the specification develops.
• Takes a selector list as an argument and will match if any of those selectors would match one element.
Any a elements that contain an image will get a black border.
a:has( > img ) { border: 1px solid #000; }
If an li does not contain a paragraph.
li:not(:has(p)) { padding-bottom: 1em; }
CSS Level 4 selectors
Browsers are beginning to implement these selectors.
See what your browser supports: http://css4-selectors.com/browser-selector-test/
http://www.rachelandrew.co.uk/presentations/css3-selectors
@rachelandrew
Thank You!