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.

SymbolNameMeaning
.dotrefers to class name
#hashrefers to id
^caretstarting text in an atribute
$dollarending text in an atribute
*asteriskcontains text in an atribute
>greater thanall child element
+plusfind adjacent sibling
~tildefind all siblings
css design techniques

We will be using sample login form to play with css selectors.

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:

  1. .className
  2. 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:

  1. #id
  2. 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:

  1. [name^='Forgot']will select all the elements with the name attribute starting with the text ‘Forgot’.
  2. [name$='Password'] will select all the elements with the name attribute ending with the text ‘Password’.
  3. input[name$='Password'] will select all the elements with the <input> tag and name attribute ending with the text ‘Password’.
  4. [name*='got']will select all the elements with the name attribute containing the text ‘got’.
  5. 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>.