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 can I enable CSS selector profiling in Chrome

    How to position two
    elements side by side?

    How can align these elements?CSS

    How can I make a fix positioned menu bar?

    How to cancel HTML “onfocus” behavior?

    Bootstrap 3 - How to maximize input width inside navbar

    How to arrange div as a dock panel?

    How to make a different flip animation using CSS?

    How to slide down to show content of DIV using CSS/jQuery?

    How to refer to an anchor pane in css?

    How to center a text nav bar with CSS

    How can I float two tables next to each other left to right and center them both?

    How to reference a long class name with spaces in CSS?

    How to switch tabs and change css class on click using Angular2?

    How do i vertically align my form in bootstrap?

    How can I do width = 100% - 100px in CSS?

    How can I make my wrapper
    vertically centered and responsive?

    how to properly resize navbar fixed in bootstrap

    How to use a sprite for a background on a div, positioning to a part of the sprite to the right of the div

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    how to use jquery to add css based on screen width

    How to add scroll to child of flex item?

    How do I get an html/css form to post to Gravity Forms?

    How to hide label on radio checked using css

    How to structure selectors in css when using specificity?

    How to apply CSS to elements that have multiple classes?

    How do I align elements using CSS?

    How to avoid css overlapping?

    How to test print output of browsers with online tools?

    How to deselect using :not according to css property and value