CSS Locators

Note|  Text in Blue [#PYTHON], Rose [#PROTRACTOR], Red [#RUBY] and Orange [#JAVA] can be edited or mentioned important for the entire blog. All the posts are practically done by me.

Experimental CSS Locators in automation aspects

CSS locators are comparatively faster than Xpath and readable; it uses JQuery's way to locate elements.

Note: This post is fully experimented on https://www.python.org/


General
     ID

               #id-search-field

     The same can be achieved through,
               *#id-search-field
               input#id-search-field

     Class

               .search-field
               .search-field.placeholder

               
     The same can be achieved through,

               *.search-field

               input.search-field

     Direct Child | absolute css

     '>' operator matches the immediate child of an element
               .python.home > #touchnav-wrapper > #nojs > p > strong:contains(Notice:)

     Sub Child | relative css

     a space between two instance matches any descendant of a parent/grand-parent elements
               .python.home strong:contains(Notice:)

     contains | text

     locates elements with text
               button:contains(GO)

     not contains | text

     skips elements with specific text
               a:not(:contains(notinthispage))

Attrribute

     CSS locates elements using properties
               input[name='q']

               input[id='id-search-field']
               input[class='search-field placeholder']
               input[class='search-field placeholder'][id='id-search-field']

     not contains | attribute
     locates all the elements that doesn't contain specific property, text, etc., 

               .tier-2:contains(Group):not(.element-4)
               .tier-2:contains(Group):not([class*='element-4'])

Advanced attrribute css selectors

     CSS locates dynamic elements using the following operators
               = operator

               ~= operator
               ^= operator
               $= operator

               *= operator
               |= operator

     Equal
     = operator lets you find elements that matches attribute with the exact specified value

               *[class='python home']

     space-separated values
     ~= operator lets you find elements that matches attribute with space-separated values

               *[class~='menu']

     prefix [begins-with]
     ^= operator lets you find elements that matches attribute starting with the specified value

               *[class^='main']

     suffix [ends-with]
     $= operator lets you find elements that matches attribute ending with the specified value

               *[class$='home']

     contains [contains]
     *= operator lets you find elements that matches attribute with a specified value, which is a part of actual attribute value

               *[class*='shell']

     hyphen separated values
     |= operator lets you find elements that matches attribute with hyphen-separated values starting from the left

               *[class|='site']

Css Siblings

     CSS locates sibilings similar to xpath
               Next sibling
               General sibling
               

     Next or Adjacent sibling

     selects the element/sibling next to the current element

               #top + header

     

     General sibling

     selects any number of siblings with matching type coming next to next from the current element

               #top ~ div

 

Pseudo class

     Pseudo-classes are actually not css inborn instead they are an absolute CSS foreigners implemented through JQuery, mootools, etc., listed below are some of the most commonly used pseudo classes for automation,
               :nth()
               :nth-child()
               :first-child
               :last-child
               :first-of-type
               :last-of-type
               :nth-of-type()
               :only-of-type
               hover
               E:focus
               link
               visited

     nth()

     collects the entire child, sub-child of a parent and matches the list in a sequential order or index with value starting from 0 as count 1

               .main-header .container div:nth(2)
               .meta-navigation.container *:nth(0)

     nth-child()

     unlike nth(), nth-child filters only the child with type and location 

               [role='menubar'] *:nth-child(1)

     here, it selects all the first child elements of the type <li>
               [role='menubar'] li:nth-child(1)

     first-child

     first-child is similar to nth-child(1)

               [role='menubar'] li:first-child

     last-child

     last-child is similar to first-child but locates the child's last elements

               [role='menubar'] li:last-child

     first-of-type

     locates the parent's first elements w.r.t type

               [role='menubar'] li:first-of-type

     last-of-type

     locates the parent's last elements w.r.t type

               [role='menubar'] li:last-of-type

     only-of-type

     matches all the given type (say, h1 tag) under a specific element

               .main-header .container h1:only-of-type

     hover

     locates element on hover over

               *[href='/psf/membership/']:hover

     E:focus
     locates element on focus
               *[href='/psf/membership/']:focus

     link
     locates element if hyperlinked
               *[href='/psf/membership/']:link

     visited

     locates already visited hyperlink

               *[href='/psf/membership/']:visited