How to combine css selectors


Tags: javascript,css,css-selectors,selenium-webdriver,selectors-api

Problem :

I use webdriver and often work with css selector and wondering if the amount of code I write to traverse each level can be decreased. Following is the javascript code to access an element and similar code in java would be present in my code.

in the below example I used 3 css selectors to traverse 3 levels and can I combine them together or atleast simplify.

document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')


Solution :

You can use descendant or child selectors (technically "combinators") to combine the first part:

document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr')

...but it will make the browser work a bit harder than your code does, because the first part of your code (document.querySelector('.datagrid')) will stop looking when it finds the first matching element, and then look for .even elements only within that. The above looks for all .even elements that have .datagrid ancestors. So it may need to search more of the document. Most of the time that doesn't matter, but it's worth pointing out. The above also assumes that there are at least four .even elements in the first .datagrid. If there aren't, your code would throw an error (because of the attempt to call .querySelectorAll on [3], which would be null), whereas the above code might throw an error (if there aren't four in total on the page), or might refer to an .even element in a subsequent .datagrid rather than the first.

The [3] makes it tricky to combine that with the one that follows. It's tempting to use .even:nth-child(3) or .even:nth-of-type(3), but that would be a mistake, because neither of those counts matches for .even and then takes the third one. nth-child matches only elements that are both .even and the third child element of their parent (considering all elements, not just .even ones). nth-of-type does the same thing, but only considering other elements that have the same tag. If you have other non-.even elements with the same tag name, it will be wrong.

Sometimes you hear talk about adding a selector (similar to the :eq provided by jQuery) to do what you're talking about, but the problem (as I understand it) is it would require a fundamental change to how selector engines process selectors (which is right-to-left). (There's also the problem that jQuery is incredibly widely used, and uses 0 as the first element's index, whereas CSS uses 1 in similar situations. So CSS would have to use something other than :eq — perhaps :index? — to avoid confusion.)


    CSS Howto..

    How to correctly apply a CSS style to all the images in a div having a specific class?

    how to make background css url dynamic using jquery

    How to set froala to calc height using css

    Div style in css, how to start under then button

    How to pass array from method to property using PHP

    How to make infinite movement of a div?

    How can i Change the DOt in a JavaFx RadioButton?

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    Best way how to put elements above an tag?

    How to remove the gap between each list-item in an unordered list?

    How to convert Xpath to CSS

    How to display child elements of
  • at 100% height?
  • How to cancel bootstrap CSS left?

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

    How to add multiple CSS elements to a div using jQuery?

    How to combine Background Image and CSS Gradient

    How to make rounded corner cut-out using CSS?

    How to crop Google GeoChart and center its content?

    How to debug CSS bundled by Webpack?

    How to exclude Hover for Active LI (Menu)?

    How to read CSS properties of elements dynamically loaded with external script on Android browser?

    How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

    How to make my twitter bootstrap overlap all other elements?

    How to render thin fonts more smoothly in CSS 3 on Windows?

    How to show blocks for progressbar using CSS

    Selenium IDE - How to check that an element is (CSS) visible?

    How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)

    How to make scroll bar permanently visible on Mac OS using CSS or jQuery

    How to align p tag side by side using css?