Scribd
Upload
281 views

CSS Selectors Cheat Sheet

This document provides a cheat sheet on CSS selectors, explaining how to select elements using attributes like ID, class, and name. It describes different selector syntax like using "#" for ID, "." for class, and "[attribute='value']" to select by attribute. Wildcards like "^", "$", and "*" are also covered. Finally it demonstrates how to select child elements using ">" to find specific descendants of a parent element.

Uploaded by

Amit Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
281 views

CSS Selectors Cheat Sheet

This document provides a cheat sheet on CSS selectors, explaining how to select elements using attributes like ID, class, and name. It describes different selector syntax like using "#" for ID, "." for class, and "[attribute='value']" to select by attribute. Wildcards like "^", "$", and "*" are also covered. Finally it demonstrates how to select child elements using ">" to find specific descendants of a parent element.

Uploaded by

Amit Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS

 Selectors  Cheat  Sheet  


 
Every  element  does  not  have  an  id  -­‐>  static  id,  unique  name,  
unique  link  text.  For  those  elements  we  need  to  build  xpath  to  
find  and  then  perform  actions  on  them.  
 
Whatever  we  use  to  find  an  element,  id,  name,  xpath,  css  -­‐>  It  
should  always  be  unique.  
It  should  only  find  one  matching  node  unless  we  want  to  capture  
a  list  of  elements.  
 
 
Syntax:  
tag[attribute='value']  
 
“#”  -­‐>  Id  
“.”  -­‐>  Class  
 
Element  Displayed  Example  Text  Box:  
input[id=displayed-­‐text]  
#displayed-­‐text  
input#displayed-­‐text  
 
input[class=displayed-­‐class]  
.displayed-­‐class  
input.displayed-­‐class  
 
Appending  Classes  
.class1.class2.class3  -­‐>  Until  we  find  a  unique  element  
 
 
 
 
Using  wildcards  in  CSS  Selectors:  
“^”  -­‐>  Represents  the  starting  text  
“$”  -­‐>  Represents  the  ending  text  
“*”  -­‐>  Represents  the  text  contained  
Syntax:  
tag[attribute<special  character>=’value’]  
 
Examples:  
input[class='inputs']  -­‐>  Only  1  matching  node  
input[class^='inputs']  -­‐>  Two  matching  nodes  
input[class='displayed-­‐class']  -­‐  No  matching  nodes  
input[class$='class']  -­‐>  One  matching  node  
input[class*='displayed-­‐class']  -­‐>  One  matching  node  
 
 
 
Finding  Children  
fieldset  -­‐>  10  matching  nodes  
Fieldset>table  
fieldset>#product  -­‐>  One  matching  node  
fieldset>button  -­‐>  One  matching  node  
Fieldset>a  
fieldset>input#name  
 
 
 
 

You might also like