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 > input
div.textUsernameContainer input
div.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:
.className
tagName.className
2. To locate using id attribute:
CSS to locate the username field can be written in following ways:
#txtUsername
input#txtUsername
Format to locate element with id
attribute:
#id
tagName#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