Relative weight of elements, classes and ids

From the Frontend Masters course CSS3 In-Depth by Estelle Weyl

When you are styling using css, the "cascade" is:

in this chart, the farther down the chart you go, the more powerful the selector.

You can select an element using a long string of element selectors, but at some point it's simpler to create an id or class.
(Unless you are styling a WordPress theme and can't.)

In Dreamweaver, you can select a piece of type, go to the CSS Designer, add a selector, and the selector created will be the most exact selector possible (It usually includes a very long string of elements.) You can use the up and down arrows on your keyboard to control how many of those element designations are; it's generally better to have fewer so they apply to more elements.

Least Powerful Selectors

*

Universal selector: 0-0-0

Elements

div

One element: 0-0-1

li > ul

2 elements: 0-0-2

body div ul li p a

6 elements: 0-0-6

Classes

.myclass

1 class: 0-1-0

*.myclass

1 class
1 universal selector: 0-1-0

*[type=checkbox]

1 attribute selector
1 universal selector: 0-1-0

a:hover

1 pseudo-class
1 element: 0-1-1

li.myclass

1 class
1 element: 0-1-1

li[attr]

One attribute
1 element: 0-1-1

li:nth-of-type(3n) > li

1 pseudo-class
2 elements: 0-1-2

form input[type=email]

1 attribute
2 elements: 0-1-2

li.myclass:nth-of-type(3n)

1 class / 1 pseudo-class
1 element: 0-2-1

input[type]:not(.myclass)

1 attribute / 1 pseudo-class
1 element: 0-2-1

.myclass:nth-child(odd) .chk[type] …

10 classes/attributes/
pseudo-classes 0-10-0

IDs

#myid

1 id selector 1-0-0

#myid li.myclass a[href]

1 id selector
1 class / 1 class attribute
2 elements: 1-2-2

#mypage #myid a

2 id selectors
1 element: 2-0-1

Inline Styles

<div style="color:red">

Inline style attached directly to an html element: 1-0-0-0

!important

p {font-size:16px !important}

Can be used in style sheets or inline. Overrides everything, can only be overridden by another !important, only use in dire emergencies: 1-0-0-0-0

Most Powerful Selectors