How do i traverse from parent to child in css selector?

Me this weekend:

I can't count the number of times I've cursed CSS for not having a :parent pseudo selector: a img:parent

The what followed was some going back and forth with people who have thought this properly through.

READER DISCOUNTSave $50 on terminal.training

I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.

$49 - only from this link

:has selector

Originally I felt that a :parent pseudo selector would do the trick, but Stuart pointed out that selectors syntax doesn't work that way, it's always left to right determines depth.

So thinking about it some more, I felt that using a :has() selector would complement the :not() selector really well. Something like this:

a:has(img) { background: none; }

Except that's completely wrong.

The E:not(s) selector applies to the particular element to which it's applied. Where as E:has(s) applies what element E contains - therefore it's asking a ton more for the browser to do.

Jonathan Snook helped shed a lot of light on this pretty core performance problem, and this weekend followed up with a detailed post about the potential performance issues with a :has() selector. But I don't think the book is quite closed on this one, but I do agree that a :has() selector is going to be almost so expensive on the render engine that it wouldn't make sense to implement.

I should also add that Shaun Inman's E < F proposal is the same as E:has(s) - and therefore I don't think it has legs.

So maybe back to the :parent selector.

:parent selector

Jonathan has a really useful example of how the :last-child selector works and how it applies live in the browser (see the section called "How do browsers actually handle this"). What we see is the browsers are looking for the closing element. A child element, regardless of it's position, always has a parentNode (I'm talking DOM right now).

Again, Jonathan points out that the browser treats the markup that comes down the wire as a stream (this is particular clear in the render pause demo), and the CSS selectors are applied to that stream as the elements are built in the DOM.

The problem with E:has(s) is once element E is found in the DOM, every new element rendered in to the DOM would require a run evaluation of the :has selector. Bottom line: bad idea.

The difference between E:has(s) and E:parent is that :parent is reference the parentNode which is one particular element. Once the element E is found in the DOM it would then just refer to it's parent and apply the style.

It would look like this:

a img:parent { background: none; }

Performance-wise, I can't see how this is any different to a regular selector, except that once it's matched, it needs the parentNode - again, something that's available immediately as the element E is rendered.

Syntax-wise, yes, it's a departure from every other syntax style, but that's not a good enough reason not to include it. There were several hear hear's to my groan on Sunday, and it would be an invaluable addition to native CSS selectors.

How do we get this in browsers?

Actually, I've no idea. Maybe you're reading and you are or know someone on the CSS working group. Maybe you know a friend of a friend. Go shake them and point them to this article.

Maybe this is a really bad idea for reasons that I've not spotted: tell me, explain in the comments.

Do we need a :parent selector? I think we do, and I've wanted it for a very long time now.

Published 11-Oct 2010 under #code & #css. Edit this post

Hi all, CSS Selectors in Selenium will be explained in this tutorial, I will describe to you how to write effective CSS Locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order:

• First try to use Id, name, class, etc.
• Then, try to interrogate by CSS
• Then, use XPath to find elements.

CSS Selectors in Selenium Strategies

Reference Demo Site: http://www.seleniumeasy.com/test/basic-first-form-demo.html

Basic Syntax

1) Using Absolute Path CSS Selector

You should use > sign to reach an element directly.  (Note: For XPath, we use / sign for this.)

Example

Syntax: form>div>input

2) Using Non-Absolute Path CSS Selector

You should use white spacebetween tags to locate the element. Use “.” for class and “#” for id.

Example

Syntax: form .form-group #user-message

3) Using Tag Name CSS Selector in Selenium

You can write the tag name directlylike “form”, “div”, “img”,”body”, etc. As below figure, I wrote the “form” tag to locate the form element.
(Note: For XPath we use //tagname for this.)

Example

4) Using Tag & Attribute & Value Trio

You can use tag[attribute=’value’] syntax.
(Note: For XPath we use tag[@attribute=’value’] for this.)

Example

Syntax: input[id=’user-message’]

5) Using Containing Text of an Attribute

You can use tag[attribute*=’containing text’]syntax.
(Note: For XPath we use tag[contains((@attribute,’containing text’)] for this.)

Example

Syntax: input[id*=’er-messa’]

6) Using Starting Text of an Attribute

You can use tag[attribute^=’starting text’] syntax.
(Note: For XPath we use  tag[starts-with( @attribute, ‘starting text’)] for this.)

Example

Syntax: input[id^=’user’]

7) Using Ending Text of an Attribute

You can use tag[attribute$=’ending text’] syntax.

Example

Syntax: input[id$=’message’]

8) Using Comma Operator to Implement OR Operation

You can use “,” operator between two CSS locator statements.

Example

Syntax: form#get-input,input#user-message

9) Using Tag and ID CSS Selector in Selenium

You can use “Tag#Id” 

Example

Syntax: input#user-message

10) Using Tag and Class CSS Selector in Selenium

You can use “Tag.Class” 

Example

Syntax: input.form-control

11) Using first-of-type CSS Selector in Selenium

You can use “Tag:first-of-type”. It will select the first tag element.

Example

Syntax: .tree-branch>ul>li:first-of-type

12) Using last-of-type CSS Selector in Selenium

You can use “Tag:last-of-type”. It will select the last tag element.

Example

Syntax: .tree-branch>ul>li:first-of-type

Note: If you want to find the last element or child you can use the below locators.

• Tag:nth-last-of-type(n)
• Tag:nth-last-child(n) 

13) Using *:last-of-type CSS Selector in Selenium

You can use “*last-of-type”. It will select the last child of the parent tag.

Example

Syntax: .tree-branch>ul>*:last-of-type (Selects the last child of parent tag “ul”.)

14) Using tag:nth-of-type(n) CSS Selector in Selenium

You can use “tag:nth-of-type(n)”. It will select the nth tag element of the list.

Example

Syntax: .tree-branch>ul>li:nth-of-type(3) (Selects 3rd li element.)

Note: If you don’t specify a tag as  *:nth-of-type(3)it will allow you to select the third child.

15) Using tag:nth-child(n) CSS Selector in Selenium

You can use “tag:nth-child(n)”. It will select the nth child.

Example

Syntax: .tree-branch>ul>li:nth-child(3) (It will select the nth child.)

16) Using Sibling “+” Operator CSS Selector in Selenium

You can use “E1+ E2“. First, it finds E1 then selects E2.

Sample HTML:

<ul id="Cars">
   <li id="mercedes">Mercedes made in Germany!</li>
   <li>BMW</li>
   <li>Porsche</li>
</ul>

Syntax: li#mercedes + li

‘li#automation + li‘ will first go to li element with id ‘mercedes’ and then select its adjacent li which is the ‘BMW’ list item.

Example

Syntax: .tree-branch>ul>li:nth-child(3) + li (It will select the next element.)

17) Exclude a CSS Class Name in Selenium CSS Locators

You can exclude any of the class names with :not(.class-name) syntax.

Example:

.btn.btn-info.pull-right:not(.xs-mt-0) 

The above selector excludes “xs-mt-o” class and selects the below the line as shown below figure.

Also, you can learn how to write Smart XPath locators in the below article.

All Selenium XPath Tactics Explained

You can find many tricks below pdf. I suggest you save it.

https://www.red-gate.com/simple-talk/wp-content/uploads/imported/1269-Locators_table_1_0_2.pdf?file=4937

See you in the next article ;)
Onur

Onur Baskirt is a senior IT professional with 15+ years of experience. Now, he is working as a Senior Technical Consultant at Emirates Airlines in Dubai.

How do I apply parent to child in CSS?

How do I navigate to a parent in CSS selector?

How do you write a CSS selector for child elements?

How do I choose a child selector?