27. 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
28. target an element when it is the last child of a
parent element
:last-child
39. 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
67. 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.
101. 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?
112. 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.
116. 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
117. 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.
118. Any a elements
that contain an
image will get a
black border.
a:has( > img ) {
border: 1px solid #000;
}
119. If an li does not
contain a
paragraph.
li:not(:has(p)) {
padding-bottom: 1em;
}
120. CSS Level 4 selectors
Browsers are beginning to implement these
selectors.
See what your browser supports:
http://css4-selectors.com/browser-selector-test/