Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
CSS Selectors создатель 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 "table", "div" and even "notexistingtag" refer to tag's name

2.1.2. attribute any tag's attribute [attr=value] [attr~=partialValue] w/o value refers to element that HAS attribute given; regardless its value class .className id #id

2.1.3. dynamic state :hover :active :visited

2.2. by position in tree

2.2.1. including "div table" means "find <table>s inside the <div>s" does not mean "implictly contains" means "that children is somewhere in the parent given" just space as separator between elements "parent" "children"

2.2.2. implict children parent>child spaces can be used: parent > child

2.2.3. neighbors, siblings reference + targetElement "p + p" matches any <p> element that follows by another <p> element "p + p" does not match to the first <p> element

2.2.4. counting :first-child :last-child :even and :odd :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 so we should avoid redundant selectors or confusing parts like + or :nth-child


4.1. CSS Selector(s)

4.1.1. are divided with comma div, span.className, table > tr > td

4.2. CSS attributes

4.2.1. a lot of different look-related properties CSS3, CSS2, CSS1 different properties can be unsupported by different browsers(caniuse.com)

4.3. several selectors could affect the same element

4.3.1. priority! calculation ordering matters! !important as a plug