Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS Selectors by Mind Map: CSS Selectors

1. everything is element

1.1. tag

1.2. text

1.3. comment

2. selectors' parts

2.1. by state

2.1.1. tag name

2.1.1.1. "table", "div" and even "notexistingtag" refer to tag's name

2.1.2. attribute

2.1.2.1. any tag's attribute

2.1.2.1.1. [attr=value]

2.1.2.1.2. [attr~=partialValue]

2.1.2.1.3. w/o value refers to element that HAS attribute given; regardless its value

2.1.2.2. class

2.1.2.2.1. .className

2.1.2.3. id

2.1.2.3.1. #id

2.1.3. dynamic state

2.1.3.1. :hover

2.1.3.2. :active

2.1.3.3. :visited

2.2. by position in tree

2.2.1. including

2.2.1.1. "div table" means "find <table>s inside the <div>s"

2.2.1.1.1. does not mean "implictly contains"

2.2.1.1.2. means "that children is somewhere in the parent given"

2.2.1.2. just space as separator between elements "parent" "children"

2.2.2. implict children

2.2.2.1. parent>child

2.2.2.2. spaces can be used: parent > child

2.2.3. neighbors, siblings

2.2.3.1. reference + targetElement

2.2.3.2. "p + p" matches any <p> element that follows by another <p> element

2.2.3.2.1. "p + p" does not match to the first <p> element

2.2.4. counting

2.2.4.1. :first-child

2.2.4.2. :last-child

2.2.4.3. :even and :odd

2.2.4.4. :nth-child

2.3. by content

2.3.1. maybe in the future

3. selecting path

3.1. any elements' selectors with any position selectors between

3.1.1. div span + b[style] > a.className

3.2. there are no braces or groups

3.2.1. this way we are able to read selectors just like ordinary text: from left to right

3.2.1.1. so we should avoid redundant selectors or confusing parts like + or :nth-child

4. CSS RULES

4.1. CSS Selector(s)

4.1.1. are divided with comma

4.1.1.1. div, span.className, table > tr > td

4.2. CSS attributes

4.2.1. a lot of different look-related properties

4.2.1.1. CSS3, CSS2, CSS1

4.2.1.2. different properties can be unsupported by different browsers(caniuse.com)

4.3. several selectors could affect the same element

4.3.1. priority!

4.3.1.1. calculation

4.3.1.2. ordering matters!

4.3.1.3. !important as a plug