CSS selector syntax in Selenium Python - 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. For example, #header selects the element with id="header".

beginner

How do you select elements by their class name?

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

intermediate

What does the selector div > p select?

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

intermediate

How do you select elements with a specific attribute value?

Use square brackets with the attribute and value inside. For example, input[type='text'] selects all <input> elements with type="text".

Which CSS selector selects all elements with class 'menu'?

A .menu

B #menu

C menu

D *menu

The dot (.) before 'menu' selects elements by class name.

What does the selector ul li select?

A All <li> elements inside any <ul>

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

C All <ul> elements inside <li>

D All <li> elements anywhere

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 a[href^='https'] select?

A All <a> elements with href containing 'https'

B All <a> elements with href starting with 'https'

C All <a> elements with href ending with 'https'

D All <a> elements with href equal to 'https'

The ^= attribute selector matches attribute values that start with the given string.

Which selector matches all direct child <p> elements of a <div>?

A div ~ p

B div p

C div + p

D div > p

The > combinator selects direct children only.

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

Think about the symbols used before the names.

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

One selects all nested, the other only immediate children.