---

CSS and CSS Selectors Introduction 

CSS represents Cascading Style Sheets, these are utilized for styling the various components of a HTML site page. In the .css documents we can find explicit components of a webpage(.html records) and afterward style them like – set their text dimension, width, stature and so forth. 

For finding the web components to be styled, we utilize certain principles gave as CSS Selectors. 

For instance, the accompanying articulation initially finds a web component fulfilling the selector design – "div#searchBox" and afterward adjusts the content inside it to focus. 

div#searchBox {text-align: center;}

In Selenium, we can utilize these CSS Selector rules/designs for finding web components and later perform various procedure on them. For instance 

//Locating searchBox element using CSS Selector
WebElement searchBox = driver.findElement(By.cssSelector("div#searchBox"));
 
//Performing click operation on the element
searchBox.sendKeys("ArtOfTesting");

How about we currently observe the various principles of CSS Selectors alongside their linguistic structure and use model. 

CSS Selectors 

The following are the language structure and models on the most proficient method to find the ideal components and use them in selenium contents. 

Using Id

CSS Selector Rule – #id
Example –
For the Sample HTML below-

<button id="submitButton1" type="button" class="btn">Submit</button>

CSS Locator – #submitButton1
Description – ‘#submitButton1’ will select the element with id ‘submitButton1’

Using class

CSS Selector Rule – .class
Example –
For the Sample HTML below-

<button id="submitButton1" type="button" class="btn">Submit</button>

CSS Locator – .btn 

Depiction – '.btn' will choose all the components with class 'btn'. 

Using tag

CSS Selector Rule – tagName
Example –
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator – input 

Depiction – 'input' will choose all the info type components. 

Using attributes and their value
CSS Selector Rule - [attributeName='attributeValue']
Example -
For the Sample HTML below-
<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator – [name='firstName'] 

Depiction – [name='firstName'] will choose the components with name property having esteem 'firstName'. 

Presently, utilizing these fundamental principles of finding web components, we can utilize them related to make increasingly vigorous locators, choosing special components. 

Using tags and id

CSS Selector Rule – tag#id
Example –
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator – input#fname 

Portrayal – input#fname will choose the 'input' component with id 'fname'. 

Using tags and class

CSS Selector Rule – tag.class
Example –
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator – input.textbox 

Portrayal – input.textbox will choose the 'input' component with id 'textbox'. 

Using tags and attributes

CSS Selector Rule – tag[attributeName=’attributeValue’]
Example –
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator – input[name='firstName'] 

Portrayal – input[name='firstName'] will choose the 'input' component with 'name' trait having esteem 'firstName'. 

Locating Child Elements (direct child only)

CSS Selector Rule – parentLocator>childLocator
Example –
For the Sample HTML below-

<div id="buttonDiv" class="small">
<button id="submitButton1" type="button" class="btn">Submit</button>
</div>

CSS Locator – div#buttonDiv>button 

Depiction – 'div#buttonDiv>button' will initially go to div component with id 'buttonDiv' and afterward select its youngster component – 'button'. 

Finding components inside different components (kid or subchild) 

CSS Selector Rule – locator1 locator2

Example-

For the Sample HTML underneath 

<div id="buttonDiv" class="small">
<button id="submitButton1" type="button" class="btn">Submit</button>
</div>

CSS Locator – div#buttonDiv button 

Depiction – 'div#buttonDiv button' will initially go to div component with id 'buttonDiv' and afterward select 'button' component inside it (which might be its youngster or sub kid). 

nth child

CSS Selector Rule – :nth-child(n)
Example –
For the Sample HTML below-

<ul id="testingTypes">
   <li>Automation Testing</li>
   <li>Performance Testing</li>
   <li>Manual Testing</li>
</ul>

CSS Locator – #testingTypes li:nth-child(2) 

Depiction – '#testingTypes li:nth-child(2)' will choose the component with id 'testingType' and afterward find the second offspring of type li for example 'Execution Testing' list thing. 

Locating Siblings

CSS Selector Rule – locator1+locator2
Example –
For the Sample HTML below-

<ul id="testingTypes">
   <li id="automation">Automation Testing</li>
   <li>Performance Testing</li>
   <li>Manual Testing</li>
</ul>

CSS Locator – li#automation + li 

Depiction – 'li#automation + li' will initially go to li component with id 'robotization' and afterward select its nearby li for example 'Execution Testing' list thing. 

For dealing with dynamic components having ids and different locators progressively generated(not known already). We can utilize the above locators by utilizing distinctive parent-kin connections of the dynamic components. Aside from this, we can likewise utilize some uncommon CSS locators utilizing which we can coordinate incomplete estimations of the characteristics. 

^ – Starts with

CSS Selector Rule – [attribute^=attributeValue]
Example –
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator – id^="user1″ 

Portrayal – 'id^="user1″' will choose the component whose id begins with "user1" esteem 

$ – Ends with 

CSS Selector Rule – [attribute$=attributeValue]
Example –
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator – id$="btn_263″ 

Portrayal – 'id$="btn_263″' will choose the component whose id closes with "btn_263" esteem 

* – Contains 

CSS Selector Rule – [attribute*=attributeValue]
Example –
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator – id*="btn" 

Portrayal – 'id*="btn"' will choose the component whose id contains with "btn" esteem 

That is all we have in this post. On the off chance that you have any inquiries please remark below.Checkout the total selenium instructional exercise here.