CSS

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

Table of Contents

CSS Selectors

Basic Selectors

  • Type selector: Select elements by their type. Ex: a, p, div will select all elements of type a, p and div respectively
  • Id selector: Select elements by their id. Ex: #john-doe will select any element with id john-doe, div#john-doe will select a div element with #jonh-doe id
  • Descendant selector: Select an element inside another element. Ex: p strong will select all strong elements inside a p element, ul li#john-doe will select the li#john-doe element within a ul element, ul#people li will select all li elements within a ul#people element.
  • Class selector: Select elements with a given class. Ex: li.spanish will select all li elements with .spanish class, .spanish will select all elements with .spanish class
  • Univeral selector: Selects every element. Ex: * selects every element, ul * selects every element inside a ul

You can also combine selectors by separating them with ,, that way you can apply the same styling rules to groups of elements. For instance:

1
2
3
4
5
li.warning,
li.special,
li.important {
    font-weight: bold;
}

Advanced Selectors

Attribute selectors

The attribute selectors allow you to select elements that have a specific attribute or a specific value for an attribute. The attribute selectors are quite flexible:

  • Select an paragraph with an attribute class: p[class]
  • Select an paragraph whose class attribute value is equal to news: E[class=“news”]
  • Select an paragraph whose class attribute value is a list of whitespace separated values and one of which is news: E[class~=“news”]
  • Select an paragraph whose class attribute value begins with bar: E[class^=“news”]
  • Select an paragraph whose class attribute value ends with bar: E[class$=“news”]
  • Select an paragraph whose class attribute value contains the substring bar: E[class*=“news”]
  • Select an paragraph whose class attribute value is a list of hyphen separated values beginning with bar: E[class|=“news”]

Adjacent sibling selector

Selects an element that directly follows another element. Elements that follow one another are called siblings. They are on the same level of depth, so when I say that an element follows another element directly I mean at the same level of depth within the DOM tree.

1
2
3
plate + apple {
    /* css */
}
1
2
3
4
5
6
7
8
<table>
    <plate><apple/></plate>
    <plate></plate>
    <apple/>  <!-- SELECTED -->
    <plate><orange></plate>
    <apple/> <!-- SELECTED -->
    <apple/>
</table>

General sibling selector

As above but this time it selects an element that follows another element (it doesn’t have to be immediately after).

1
2
3
plate ~ apple {
    /* css */
}
1
2
3
4
5
6
7
8
<table>
    <plate><apple/></plate>
    <plate></plate>
    <apple/>  <!-- SELECTED -->
    <plate><orange></plate>
    <apple/> <!-- SELECTED -->
    <apple/> <!-- ALSO SELECTED -->
</table>

Child selector

Selects a direct children of another element, a direct children is the first level (direct) descendant.

1
2
3
4
/* select an apple directly on the table */
table > apple {
    /* css */
}
1
2
3
4
5
6
7
<table>
    <apple/>  <!-- SELECTED -->
    <plate><apple/></plate>
    <plate><apple/></plate>
    <apple/>  <!-- SELECTED -->
    <plate><orange></plate>
</table>

Pseudo-class and Pseudo-elemnet Selectors

This type of selectors allow providing styling based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors, for instance, whether an a element has been visited or has the mouse pointer hovering over, or whether al element is the first child of another element.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

Pseudo-class Selectors

:first-child and :last-child

:first-child selects the first element inside another element. :last-child selects the last element inside another element. Ex: p:first-child selects all first child p elements, that is all first elements that are also a p element:

1
2
3
4
/* select the first element in a plate if it is an apple */
plate apple:first-child {
    /* css */
}
1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <apple/>
    <plate>
        <apple/> <!-- SELECTED -->
        <orange/>
    </plate>
    <apple/>
    <plate>
        <orange/>
        <apple/>
    </plate>
</table>
:only-child

Selects an element that is the only element inside another one:

1
2
3
4
/* select an apple when it is the only thing on a plate */
plate apple:only-child {
    /* css */
}
1
2
3
4
5
6
7
8
9
10
11
<table>
    <apple/>
    <plate>
        <apple/> <!-- SELECTED -->
    </plate>
    <apple/>
    <plate>
        <orange/>
        <apple/>
    </plate>
</table>
:nth-child selector and :nth-last-child

The nth-child(n) selector selects an element by its order in another element. nth-last-child(n) does the same thing but starting the count from the back. Ex: p:nth-child(2) selects a p that is the second child of an element (both conditions must occur i.e. the second child of an element must be a paragraph).

1
2
3
4
5
6
7
8
/* select the second thing on the table if it is a plate */
table plate:nth-child(2) {
    /* css */
}
/* select the third thing on the table from the back if it is a plate */
table plate:nth-last-child(3) {
    /* css */
}
1
2
3
4
5
6
7
8
<table>
    <plate/>
    <plate> <!-- SELECTED --> <!-- SELECTED -->
        <apple/>
    </plate>
    <apple/>
    <plate> <orange/> </plate>
</table>
:first-of-type and :last-of-type

:first-of-type selects the first element of a specific type. :last-of-type selects the last element of a specific type. Ex: ul a:first-of-type selects the first a element within a ul element, a:first-of-type selects the first a element.

1
2
3
4
/* select the first apple on the table */
table apple:first-of-type {
    /* css */
}
1
2
3
4
5
6
7
8
<table>
    <plate/>
    <plate>
        <apple/> <!-- SELECTED -->
    </plate>
    <apple/>
    <plate><orange/></plate>
</table>
:nth-of-type(n)

Selects a specific element based on its type and order in another element. You can also use the special odd or event selectors as a value for n to select elements in odd and even positions. Ex: article p:nth-of-type(2) selects the second paragraph within a article element, but this time, as opposed to the :nth-child selector it doesn’t necessarily have to be the second child.

1
2
3
4
/* select the second apple on the table */
table apple:nth-of-type(2) {
    /* css */
}
1
2
3
4
5
6
7
8
<table>
    <plate/>
    <plate>
        <apple/>
    </plate>
    <apple/> <!-- SELECTED -->
    <plate><orange/></plate>
</table>

Additionally, you can use a more complex formula to select elemnets through :nth-of-type. You can use 3n+2 to select every third element after the second element.

:only-of-type

Selects an element if it is the only one of its type. Ex: ul li:only-of-type selects an li element only if it is the single li inside a ul element.

1
2
3
4
/* select an apple if it is the only apple in a plate */
plate apple:only-of-type {
    /* css */
}
1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <plate/>
    <plate>
        <apple/> <!-- SELECTED -->
        <orange/>
    </plate>
    <apple/>
    <plate>
        <apple/>
        <apple/>
    </plate>
</table>
:empty

Selects elements that don’t have any children.

1
2
3
4
/* select plates that are empty */
plate:empty {
    /* css */
}
1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <plate/>  <!-- SELECTED -->
    <plate>
        <apple/>
        <orange/>
    </plate>
    <apple/>
    <plate>
        <apple/>
        <apple/>
    </plate>
</table>
Negation pseudo class

The negation pseudo class :not selects all elements that do not match the negation selector. Ex: article p:not(:first-of-type) selects all p elements but the first one within an article. article:not(.news) selects all article elements that don’t have the class news.

Pseudo-element Selectors

Pseudo-element selectors create abstractions about the document tree beyond those specified by the document language. Pseudo-elements provide authors with the means to style elements such as the first letter or first line of an elements’ content. These are:

  • ::first-line: selects the contents of the first line of an element. Ex p::first-line selects the first line of a p element. It doesn’t match a real element, it matches a pseudo-element that conforming user agents will insert at the beginning of every p element.
  • ::first-letter: selects the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
  • ::before and ::after: they can be used to describe generated content before or after an element’s own content. Ex: li::before { content: '-'} adds - before the content of any li element.

jQuery Special Selectors

jQuery offers a lot of cool extensions to CSS3 selectors to help you select DOM elements. Some these are:

  • :animated: select all elements being animated
  • [name!="value"]: select all elements that don’t have this attribute, or do have the attribute with another value
  • :button: select all button elements or elements with [type="button"].
  • :checkbox: select all elements of type checkbox
  • :eq(n): select all elements at index n within the matched set
  • :even(): select even elements, zero-indexed
  • :odd(): select odd elements, zero-indexed
  • :file(): select all elements of type file
  • :first(): select the first matched element
  • :gt(n): select all elements at an index greater that n within the matched set
  • :has(): selects elements which contain at least one element that matches the specified selector
  • :header: selects all elements that are headers, like h1, h2, and so on
  • :hidden: selects all elements that are hidden. Hidden elements either have display:0, or type="hidden", or width and height set explicitly to 0, or have an ancestor element that is hidden and therefore they are not shown in the page
  • :image: selects all elements of type image
  • :input: selects all input, textarea, select and button elements
  • :last: selects the last element within a matched set
  • :lt(n): selects all elements at an index lower than index n within the matched set
  • :parent: selects all elements that have at least one child node (either element or text)
  • :password: select all elements of type password
  • :radio: select all elements of type radi
  • :reset: select all elements of type reset
  • :selected: select all elements that are selected (for option elements)
  • :submit: select all elements of type submit
  • :text: select all input elements of type text
  • :visible: slect all elements that are visible (elements that consume space in the document, that is, opacity: 0 and visibility:hidden are considered visible)

Other Selectors

For other selectors visit the W3C CSS3 selectors standard.

Using CSS to Animate Elements

CSS Transforms

CSS transforms allow you to perform visual transformations on elements such as translation, rotation, scaling or skewing.

Translation

The translate transform lets you translate an element in space:

1
2
3
translate(tx, ty)
translateX(tx)
translateY(ty)

For instance:

1
2
3
.move{
    transform: translate(10px, 2em);
}

See JsFiddle for a practical example.

Scaling

The scale transform allows you to scale elements:

1
2
3
scale(sx, sy)
scaleX(sx)
scaleY(sy)

For instance:

1
2
3
.scale{
    transform: scale(2, 0.5);
}

See JsFiddle for a practical example.

Rotation

The rotate transform allows you to rotate elements:

1
rotate(deg)

For instance:

1
2
3
.rotate{
    transform: rotate(30deg);
}

See JsFiddle for a practical example.

Skewing

The skew transform allows you to skew elements:

1
2
3
skew(anglex, angley)
skewX(angle)
skewY(angle)

For instance:

1
2
3
.skew{
   transform: skew(10deg, 10deg);
}

See JsFiddle for a practical example.

Combining Transformations

You can also combine transforms together:

1
2
3
.move-and-rotate{
    transform: translate(100px, 50px) rotate(50deg);
}

See JsFiddle for a practical example.

3D Transforms

In addition to the 2D transforms above, css transforms also provides support for 3D transforms by adding the z axis to the previous transforms:

1
2
3
4
5
6
translate3d(tx, ty, tz)
translateZ(tz)
rotate3d(rx, ry, rz, deg)
rotateZ(deg)
scale3d(sx, sy, sz)
/* etc... */

CSS Transitions

Transitions provides a very simple API to control the animation behavior of changing CSS styles. By using transitions you can provide smooth animations while elements transition between CSS style states instead of reflecting these changes in style immediately.

CSS transitions allow you to specify which property to animate, how long the animation will take and how the transition itself will run (will timing function to use, i.e. linear, fast an the beginning and slowly at the end, etc):

1
2
3
4
5
6
7
.becomes-opaque{
   opacity: 0.5;
   transition: opacity 1s linear;
}
.becomes-opaque:hover{
   opacity: 1;
}

You can see this example on jsfiddle. The complete rule with all its options looks like this:

1
transition: none | <property> <time> <timing-function> <delay>

Note that you cannot animate all css properies in the universe. This is a list of the css properties that you can animate.

You can also animate multiple properties via css transitions at the same time. For instance:

1
2
3
4
5
6
7
8
9
.becomes-opaque{
    opacity: 0.5;
    transition: opacity 1s, transform .35s ease-in-out;
}

.becomes-opaque:hover{
    opacity: 1;
    transform: translateX(50px);
}

Check this example at jsfiddle. Finally you can transition all properties using all.

CSS Animations

CSS animations bring you one step further from css transitions and allow you to design finely grained animations between different css styles that can affect an element or multiple elements. They are composed of a style that describes the animation itself with the animation CSS rule and a series of keyframes that describe the animation frame by frame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.infinite-fade-out{
   animation: infinite-fadeout 5s infinite;
}

@keyframes infinite-fadeout{
    from { opacity: 0; }
    to {opacity: 1;}
}

// also

@keyframes infinite-fadeout{
    0% { opacity: 0; }
    50% {opacity: .75;}
    100% {opacity: 1;}
}

The full short-hand notation for the animation property is:

1
2
3
4
5
6
7
.myanimation{
    animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
}
// example
.myanimation{
    animation: move 4s linear 0s infinite alternate [none] [running];
}

Layouts

Multicolumn layout

The CSS multicolumn layout allows you to define layouts with multiple columns of text a la newspaper. You enable this type of layout by using either the column-count property that specifies the number of columns to use, or the column-width property that specifies the width of the columns:

1
2
3
article{
    column-count: 3;
}
1
2
3
article {
    column-width: 20em;
}

You can use the following properties to configure the columns in different fashions:

  • columns, you can use the columns shorthand to specify either column-width, column-count or both
  • the browser will calculate the optimal height of the multiple column layout but you can specify height or max-height if you wish to have more control
  • the column-gap property allows you to specify the gap between columns.
  • the column-rule creates a rule(line) between columns
  • the column-span makes it possible for an element to span across all columns when its value is set to all (for instance, this would be helpful for a header element)
  • the column-fill determines how the content is particioned into columns. The content can either be balance as in all columns will have the same height or auto which will make the layout take up the room the content needs.

CSS Regions

CSS Regions are an interesting concept in which you define your content using semantic HMTL 5 elements as usual but, instead of styling this elements with a specific layout directly, you use a specific set of non-semantic elements to define the layout and flow the content from the semantic elements into the layout elements. In order to do this you use flow-into to mark the elements with content:

1
2
3
.content{
    flow-into: mycontent
}

And the flow-from css property to mark the elements that represent the layout.

1
2
3
.layout{
    flow-from: mycontent
}

Where the mycontent is an identifier that connects content with layout.

For more information about css regions look into this article at dev.opera.

Awesome CSS References

Comments