CSS Selectors Cheat Sheet

This article presents various CSS expressions for finding web elements.

It uses the following page:

https://vpl.bibliocommons.com/search?q=java&t=keyword


The list of CSS expressions is not complete so if you have any ideas of new expressions, please leave them in the Comments section.


You can test the CSS expressions in Chrome by

  • click the Chrome menu
  • select More Tools
  • click the CONSOLE tab
  • type $S("css expression")
  • press ENTER


Find Elements Based on Tag


EXAMPLE

input

Finds the elements with the INPUT tag.









Find Elements Based on the Class attribute

EXAMPLE

inpu­t.search_button

Finds the elements with INPUT tag that have a CLASS attribute with the "­search_button­" value










Find Elements Based on the Id attribute

EXAMPLE

inpu­t#globalQuery

Finds the elements with INPUT tag that have a ID attribute with the "globalQuery­" value









Find Elements Based On An Attribute


EXAMPLE

inpu­t[name='q']

Finds the elements with the INPUT tag that have the NAME attribute value equal to "­q"









Find Elements That are Immediate Children of Another Element

EXAMPLE

div.dropdown > a

1. Finds elements with the DIV tag that have a CLASS attribute with  the "­dropdown­" value

2. Finds A elements that are immediate children of the DIV elements









Finds Elements That Are Included in Other Elements (direct children or not)

EXAMPLE

div[class*='row'] a


1. Finds the elements with the DIV tag that have the CLASS attrib­ute's value starting with ­"row"

2. Finds all A elements (direct children or not) that are inside of the DIV elements











Find Elements That Have a Keyword Included in an Attribute Value

EXAMPLE

input[testid*='field']  

Finds the elements with the INPUT tag that have the "field" keyword included in the TESTID attribute value












Find Elements That Have an Attribute Value Beginning With a Keyword

EXAMPLE

input[testid^='field']


Finds the elements with the INPUT tag that have the TESTID attribute value starting with "field"











Find Elements That Have an Attribute Value Ending With a Keyword

EXAMPLE

input[testid$='search']


Finds the elements with the INPUT tag that have the TESTID attribute value ending with "search"











Find Elements That Are Preceded By Other Elements



EXAMPLE

input#search_category + input#globalQuery


Finds the elements matched by input#globalQuery that are immediately preceded by elements matched by input#search_category.



Related CSS locator:

input#search_category ~ input#globalQuery



Finds the elements matched by input#globalQuery that are preceded (immediately or not) by elements matched by input#search_category.






NEXT







Share this

4 Responses to "CSS Selectors Cheat Sheet"

  1. Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..

    Veritas Volume Manager Training in Chennai

    ReplyDelete
  2. Such really an informative blog..Thank you Alex for sharing it. This is really useful for web designer and developer !!
    web development company jaipur

    ReplyDelete