COURSE [CSS Selectors]

gistfile1.txt

COURSE [CSS Selectors]

Searching is based on Tags and Attributes.

Tags: div, input, a, ul, li
Attributes: id, class, name, type

Special annotations (shortcuts):
for id       -> #idName
For class -> .className

ul>li, ol>li -> comma means OR

ul#menu li.active -> 2 прыжка

 For searching selectors in browser -> open dev tools -> tab: Console -> enter: $$(“selector”)

$$(“a”) -> will find all links

Searching by attribute:
[name=password] -> will find element with attribute name with value password
[placeholder=search]
[type=button]
[name=email]
[checked] -> will find element with this attribute (usually for booleans) and no value requires
[enabled]
[readonly]

Partial match:
[title *= Name] -> contains text
[src ^= http] -> starts from
[src $= .pdf] -> ends with
[class~=‘competed’] -> containing the class ‘competed’ отделенный пробелами с 2х сторон

label -> find all elements with tag `label`
.error -> with class error
label.error -> by tag and class
label.error.fatal -> by tag and two classes
label.error[for=email] -> by tag, class and attribute
label[for=email][class=error] -> by two attributes

Negative conditions -> :not(…)
label:not(.error) -> find all elements label excluding error class
input:not([type=text]) -> not texted input fields
a:not([href ^= http]) -> local links

Moving within DOM
div#main p    -> find p element EVERYWHERE inside block with tag div where id=main
div#main>p   -> find element p EXACTLY inside particular block div where id=main

div#main li:first-child     -> find first element in the list
div#main li:last-child     -> find first element in the list
div#main li:nth-child(1)  -> find element in the list by index
div#header>div:nth-of-type(1)  -> find only required by type `div`

////

https://docs.google.com/document/d/1yCRtiij9v3-sk5NHXNMXxdcKB-AwgB5952jfF0xNctw/edit