CSS selector syntax in Selenium Java - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS selector?

A CSS selector is a pattern used to select and style HTML elements on a web page.

beginner

How do you select an element by its ID using CSS selector syntax?

Use the hash symbol (#) followed by the element's ID. Example: #header selects the element with id="header".

beginner

How do you select elements by their class name in CSS selectors?

Use a dot (.) followed by the class name. Example: <code>.button</code> selects all elements with class="button".

intermediate

What does the CSS selector div > p select?

It selects all <p> elements that are direct children of a <div> element.

beginner

How do you select all elements of a certain type, for example all paragraphs?

Use the element name as the selector. Example: p selects all <p> elements.

Which CSS selector selects elements with class 'active'?

A .active

B #active

C *active

D active

The dot (.) is used to select elements by class name.

What does the selector ul li select?

A All <ul> elements inside <li>

B Only direct child <li> elements of <ul>

C All <li> elements anywhere

D All <li> elements inside any <ul>

A space between selectors means any descendant, so all

inside

.

How do you select an element with id 'main'?

A #main

B .main

C main

D *main

The hash (#) selects elements by their id attribute.

What does the selector input[type='text'] select?

A All elements with attribute type

B All input elements

C All input elements with type attribute equal to 'text'

D All text elements

Attribute selectors select elements with specific attribute values.

Which selector selects all direct children <p> of a <div>?

A div p

B div > p

C div + p

D div ~ p

The > symbol selects direct children only.

Explain how to select elements by ID, class, and element type using CSS selectors.

Think about the symbols used before the name.

Describe the difference between the selectors div p and div > p.

Look at the space vs > symbol.