CSS stands for Cascading Style Sheets. It controls how elements are displayed on a web page.
There are various ways to write CSS selectors but before we start writing, let us first understand a few symbols that CSS uses to locate an element.
| Symbol | Name | Meaning |
|---|---|---|
| . | dot | refers to class name |
| # | hash | refers to id |
| ^ | caret | starting text in an atribute |
| $ | dollar | ending text in an atribute |
| * | asterisk | contains text in an atribute |
| > | greater than | all child element |
| + | plus | find adjacent sibling |
| ~ | tilde | find all siblings |
We will be using sample login form to play with css selectors.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form id="frmLogin" method="post" action="/index.php/auth/validateCredentials"> <div id="username" class="textUsernameContainer"> <input name="txtUsername" id="txtUsername" type="text"> <span class="form-hint">Username</span> </div> <div id="password" class="textPasswordContainer"> <input name="txtPassword" id="txtPassword" autocomplete="off" type="password"> <span class="form-hint">Password</span> </div> <div id="divLoginButton"> <input type="submit" name="Submit" class="button" id="btnLogin" value="LOGIN"> <div id="forgotPasswordLink"> <a href="/index.php/auth/requestPasswordResetCode" name="Forgot Password">Forgot your password?</a> </div> </div> </form> |
1. To locate using class attribute:
CSS to locate username <input> tag can be written in following ways:
.textUsernameContainer input.textUsernameContainer > inputdiv.textUsernameContainer inputdiv.textUsernameContainer > input
In the last two statements, We are locating the username field from the parent <div> tag as the username field does not have any associated class attribute.
Format to locate element with class attribute:
.classNametagName.className
2. To locate using id attribute:
CSS to locate the username field can be written in following ways:
#txtUsernameinput#txtUsername
Format to locate element with id attribute:
#idtagName#id
3. To locate using Wildcard selectors:
$, ^ and * are known as wildcard selectors. It is used to select multiple elements with matching patterns.
CSS to locate forgot password link can be written as:
[name^='Forgot'][name$='Password']input[name$='Password'][name*='got']a[name*='got']
Understanding above CSS:
[name^='Forgot']will select all the elements with the name attribute starting with the text ‘Forgot’.[name$='Password']will select all the elements with the name attribute ending with the text ‘Password’.input[name$='Password']will select all the elements with the<input>tag and name attribute ending with the text ‘Password’.[name*='got']will select all the elements with the name attribute containing the text ‘got’.a[name*='got']will select all the elements with the<a>tag and name attribute containing the text ‘got’.
4. To locate direct child vs all childs:
Symbol > is used to find a direct child of an element.
Suppose we want to find all <div> tags that are directly present under <form> tag then we can write our CSS as form > div .
But, if we want to find all the <div> tags that are present under <form> tag (directly child or child of the child) then CSS for that can be written as form div.
5. To locate siblings:
There are two ways to locate a sibling of an element. We can either find an adjacent sibling or all siblings.
To find an adjacent sibling, we use the+ symbol and to find all siblings, we use the ~ symbol.
To find an adjacent sibling of username <div>, we can write CSS as div[id='divUsername'] + div. This will locate only the password <div>.
But, to find all siblings of username <div>, we can write CSS as div[id='divUsername'] ~ div. This will locate the password and the login button <div>.
Leave a Reply