Basic Selectors

Identifier (#)

#myElement {
	/*css*/
}

Matches an element with named identifier 'myElement'.

Basic Selectors

Classes (.)

.myElementClass {
	/*css*/
}

Matches all elements which have class 'myElementClass'.

Basic Selectors

Element (tagname)

div {
	/*css*/
}

Matches all element which tag name is 'div'.

Child Selectors

Direct Children (>)

Consider the following HTML:

<ul id="childExample">
	<li>
		<ul>
			<li>
				list inside list
			</li>
		</ul>
	</li>
	<li>
		list
	</li>
</ul>

Child Selectors

Direct Children (>)

ul#childExample li {
	/*css*/
}

Matches all elements descendant of the previous element (all li inside ul).

ul#childExample > li {
	/*css*/
}

Matches all elements direct descendant of the previous element (all li that are direct children of ul#childExample).

Attribute Selectors

[attr]

Represents an element with an attribute name of attr, not caring for it's value.

[required] {
	/*css*/
}

Attribute Selectors

[attr=value]

Represents an element with an attribute name of attr and whose value is exactly "value".

[controls=true] {
	/*css*/
}

[title="Title with spaces"] {
	/*css*/
}

Attribute Selectors

[attr~=value]

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[data-keywords~=somekeyword] {
	/*css*/
}

Attribute Selectors

[attr|=value]

Represents an element with an attribute name of attr. Its value can be exactly "value" or can begin with "value" immediately followed by "-". It can be used for language subcode matches.

[lang|=en] {
	/*css*/
}

Attribute Selectors

[attr^=value]

Represents an element with an attribute name of attr and whose value is prefixed by "value".

[href^=http] {
	/*css*/
}

Attribute Selectors

[attr$=value]

Represents an element with an attribute name of attr and whose value is suffixed by "value".

[href$=pdf] {
	/*css*/
}

Attribute Selectors

[attr*=value]

Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

[href*="com"] {
	/*css*/
}

Simbling Selectors

Adjacent Simbling (+)

This selector uses the plus sign, "+", to combine two sequences of simple selectors. The elements in the selector have the same parent, and the second one must come immediately after the first.

h1 + p {
	/*css*/
}

<h1>Title</h1>
<p>matched text</p>
<p>unmatched text</p>

Simbling Selectors

General Simbling (~)

The general sibling combinator works pretty much the same as the adjacent sibling combinator, but with the difference that the second selector doesn’t have to immediately follow the first one.

h1 ~ p {
	/*css*/
}

<h1>Title</h1>
<h2>Subtitle</h2>
<p>matched text</p>

Pseudo-classes

:first-child

The :first-child pseudo-class allows you to target an element that is the first child of another element.

ul li:first-child {
	/*css*/
}

<ul>
	<li>matched li</li>
	<li>li</li>
</ul>

Pseudo-classes

:last-child

The :last-child pseudo-class allows you to target an element that is the last child of another element.

ul li:last-child {
	/*css*/
}

<ul>
	<li>li</li>
	<li>matched li</li>
</ul>

Structural Pseudo-classes

:nth-child() / :nth-last-child()

The :nth-child() pseudo-class allows you to target one or more specific children of a parent element. The :nth-last-child pseudo-class works basically as the :nth-child pseudo-class, but it starts counting the elements from the last one

ul li:nth-child(1) {
	/*css*/
}

<ul>
	<li>matched li</li>
	<li>li</li>
</ul>

Structural Pseudo-classes

:nth-child() / :nth-last-child()

You can use the keywords 'odd' or 'even' and also 'n':

ul li:nth-child(3n+3) {
	/*css*/
}

<ul>
	<li>li</li>
	<li>li</li>
	<li>matched li</li>
</ul>

(3 x 0) + 3 = 3 = 3rd Element, (3 x 1) + 3 = 6 = 6th Element, (3 x 2) + 3 = 9 = 9th Element, etc.

Structural Pseudo-classes

:nth-of-type() / :nth-last-of-type()

The :nth-of-type pseudo-class works just like the :nth-child, with the difference that it only counts children that match the element in the selector. Same with last.

li:nth-of-type(3n+2) {
	/*css*/
}

<ul>
	<li>li</li>
	<li>matched li</li>
	<li>li</li>
</ul>

Structural Pseudo-classes

:first-of-type / :last-of-type

The :first-of-type pseudo-class is used to target an element that is the first of its type within its parent. The :last-of-type pseudo-class works exactly the same, but targets the last child of its type instead.

.post > p:first-of-type {
	/*css*/
}

Structural Pseudo-classes

:only-child

The :only-child pseudo-class represents an element that is the only child of its parent.

.news > p:only-child {
	/*css*/
}

Structural Pseudo-classes

:only-of-type

The :only-of-type pseudo-class represents an element that is the only child of its parent with the same element.

.post > img:only-of-type {
	/*css*/
}

Structural Pseudo-classes

:empty

The :empty pseudo-class represents an element that has no content within it.

#sidebar .box:empty {
	/*css*/
}

Negation Pseudo-classes

:not()

The negation pseudo-class, :not(), lets you target elements that do not match the selector that is represented by its argument.

input:not([type="submit"]) {
	/*css*/
}

Pseudo-Elements

::first-line / ::first-letter

Pseudo-elements allow you to access elements that don’t actually exist in the HTML.

The ::first-line pseudo-element will match the first line of a block, inline-block, table-caption or table-cell level element. The ::first-letter pseudo-element will match the first letter of a block, unless it’s preceded by some other content, like an image, on the same line.

h1 + p::first-line {
	/*css*/
}

h1 + p::first-letter {
	/*css*/
}

Pseudo-Elements

::before / ::after

The ::before and ::after pseudo-elements are used to insert content before or after an element’s content, purely via CSS. These elements will inherit many of the properties of the elements that they are being attached to.

.clearfix::after {
	content:" ";
	display:table;
	clear:both;
}

Properties

Vendor Prefixes

Vendor prefixes are meant to enable the use of certain properties that are not yet stable and are for testing purposes.

div {
	-webkit-border-radius:8px;
	-khtml-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px
}

Properties

Multiple declarations

div {
	box-shadow:10px 10px 5px red, 10px 10px 5px blue inset;
	background-image: url(sheep.png), url(betweengrassandsky.png);
	background-position: center bottom, left top;
}

Properties

border-radius

Add rounded borders to the box.

div {
	border-radius:15px;
	/*border-radius: radius;*/
}

Properties

resize

Used normally on form elements to enable resizing.

textarea {
	resize:vertical; /*none, vertical, horizontal, both*/
}

Properties

gradient

Create gradient backgrounds without use of images.

div {
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

Properties

background-size

Change the size of the background image.

div {
	background: red url('/assets/img/magic.jpg') 0 0 no-repeat;
	background-size:1050px 100px;
}

Properties

text-shadow

Create shadows on your text.

div {
	text-shadow: 10px 10px 10px red;
	/*text-shadow: x y blur color;*/
}

Properties

box-shadow

Create shadows on your boxes.

div {
	box-shadow: 10px 10px 10px 50px red;
	/*text-shadow: [inset] x y blur spread color;*/
}

Properties

text-stroke

Create shadows on your text.

div {
	text-stroke: 2px red;
	/*text-stroke: width color;*/
}

Properties

Opacity

Change the opacity of the box.

div {
	opacity:.5;
	/*opacity: 0-1;*/
}

Properties

transform

Transform your element.

div {
	transform:translate(100px) rotate(45deg) skewX(30deg);
	/*transform:translate(x, y) rotate( degrees ) skewX( degrees );*/
}

Properties

transition

Transition between properties.

a {
	transition:all 2s ease;
	background:red;
}
a:hover {
	background:green;
}

Properties

animation

h1#animation {
  animation:slidein 3s infinite;
  background-color: red;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
    opacity:0;
  }

  to {
    margin-left: 0%;
    width: 100%;
    opacity:1;
  }
}

This is an animation test!

Properties

animation - cont.

This is an animation test!

Properties

Box-Sizing

div {
	box-sizing:border-box;
	padding:20px;
	width:500px;
	border:3px solid green;
}

Default box model: width = content

border-box box model: width = content+padding+border

Selectors - Specificity

Selectors have different 'ranks' in the CSS, so the latest selectors on the file will not always override the previous ones for the same elements.

So how do you calculate the specificity of a particular selector? Take into account that specificity will be represented as four numbers separated by commas, like:
1, 1, 1, 1 or 0, 2, 0, 1

Selectors - Specificity

(a), (b), (c), (d)

• (a) is always zero, unless there is a style attribute applied to that element within the markup itself;
• (b) is the sum of the number of IDs in that selector
• (c) is the sum of other attribute selectors and pseudo-classes in that selector. Classes (.example) and attribute selectors (eg. li[id=red]) are included here.
• (d) counts the elements (like table, p, div, etc.) and pseudo-elements (like :first-line)
• The universal selector (*) has a specificity of zero

Selectors - Specificity

Examples:

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

From the following selectors, the first one is the one who will be applied to the element, because it has the higher specificity:

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2