HTML and CSS Reference
In-Depth Information
:active
: an active element
•
:focus
: an element that has focus
•
:visited
: a visited link
•
:hover
: an element that is hovered over (keep in mind this does not work on touch devices)
•
:selection
: an element that is currently selected by the user
•
:checked
: a form element that is checked
•
:nth-child(n)
: an element that is the nth sibling (you can also use odd/even keywords in
place of
n
here)
•
:nth-last-child(n)
: an element that is the nth sibling, counting from the last sibling
•
These pseudo classes are very helpful in manipulating your ad layout. Use them for anything from hovering over
a CTA element and changing its scale to styling an unordered list with even and odd numbering. In the following
chapters, pseudo classes and selectors will be used to target our elements.
■
For more information on the Css3 pseudo classes, visit
Note
Pseudo Elements
Last, there are also pseudo elements in CSS; they allow designers to target elements relative to their own markup and
design. Here are a few of them.
•
::first-letter
: targets the first letter of text
•
::first-line
: targets the first line of text
•
::before
: targets before an element
•
::after
: targets after an element
Using pseudo elements, you can quickly get magazine and newspaper-like type layouts with extreme ease. If you
want to make the first letter in a paragraph bold or simply increase its font size, pseudo elements are where to look. As
with everything emerging, be sure to check browser compatibility before using these features in your campaign or if
older browsers are being targeted.
CSS Preprocessors
Lately, web advancements in code development have really taken off! It seems everyday another boutique meta
language is being created. One of these languages would be a code preprocessor and developer-created custom tools
to generate CSS and HTML markup code in new ways. Some of these advances are SASS, LESS, and HAML, which are
CSS and HTML preprocessors.
SASS
SASS, or syntactically awesome style sheets, is a metalanguage: it sits on top of normal CSS development. SASS,
initially designed by Hampton Catlin, aims to describe the CSS document with more structure and style than
traditional CSS development. Using SASS requires a compiler to translate SCSS files into normal CSS files so the
