Queryselector with Nested Nth-Child in Chrome Doesn't Appear to Work

Why `nth-of-type` behaves differently in different browser versions?

It is a limitation of Symfony's CssSelector component which is used by Mink

Mink uses CssSelector to translate elements to xpath which is interpretable by the driver.

And this tool simply does not fully support several types of CSS selectors, which is actually stated in the official documentation:

Several pseudo-classes are not yet supported:

*:first-of-type, *:last-of-type, *:nth-of-type, *:nth-last-of-type, *:only-of-type. (These work with an element name (e.g. li:first-of-type) but not with *.

Selecting second children of first div children in javascript

Assuming that structure is static you can do this:

var mainDiv = document.getElementById('mainDiv'),
    childDiv = mainDiv.getElementsByTagName('div')[0],
    requiredDiv = childDiv.getElementsByTagName('div')[1];

Further reading: .getElementsByTagName() (from MDN).

Firefox's CSS3 nth-child support?

Hmm... according to this page Firefox 3.0 does not support :nth-child.

Build the querySelector string value of any given node in the DOM

I see this question is from 2015 but I just dealt with this issue and had to build a custom function to do so.

I've made a snippet to test it, just click any element and the querySelector should display as a string in the bottom div.

function getQuerySelector(elem) {

  var element = elem;
  var str = "";

  function loop(element) {

    // stop here = element has ID
    if(element.getAttribute("id")) {
      str = str.replace(/^/, " #" + element.getAttribute("id"));
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // stop here = element is body
    if(document.body === element) {
      str = str.replace(/^/, " body");
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // concat all classes in "queryselector" style
    if(element.getAttribute("class")) {
      var elemClasses = ".";
      elemClasses += element.getAttribute("class");
      elemClasses = elemClasses.replace(/\s/g, ".");
      elemClasses = elemClasses.replace(/^/g, " ");
      var classNth = "";

      // check if element class is the unique child
      var childrens = element.parentNode.children;

      if(childrens.length < 2) {
        return;
      }

      var similarClasses = [];

      for(var i = 0; i < childrens.length; i++) {
        if(element.getAttribute("class") == 
childrens[i].getAttribute("class")) {
          similarClasses.push(childrens[i]);
        }
      }

      if(similarClasses.length > 1) {
        for(var j = 0; j < similarClasses.length; j++) {
          if(element === similarClasses[j]) {
            j++;
            classNth = ":nth-of-type(" + j + ")";
            break;
          }
        }
      }

      str = str.replace(/^/, elemClasses + classNth);

    }
    else{

      // get nodeType
      var name = element.nodeName;
      name = name.toLowerCase();
      var nodeNth = "";

      var childrens = element.parentNode.children;

      if(childrens.length > 2) {
        var similarNodes = [];

        for(var i = 0; i < childrens.length; i++) {
          if(element.nodeName == childrens[i].nodeName) {
            similarNodes.push(childrens[i]);
          }
        }

        if(similarNodes.length > 1) {
          for(var j = 0; j < similarNodes.length; j++) {
            if(element === similarNodes[j]) {
              j++;
              nodeNth = ":nth-of-type(" + j + ")";
              break;
            }
          }
        }

      }

      str = str.replace(/^/, " " + name + nodeNth);

    }

    if(element.parentNode) {
      loop(element.parentNode);
    }
    else {
      str = str.replace(/\s/g, " > ");
      str = str.replace(/\s/, "");
      return str;
    }

  }

  loop(element);

  return str;

}

https://jsfiddle.net/wm6goeyw/

The CSS Quote in a Quote Issue

I couldn't get this to work with just CSS selectors nth-child(odd) and nth-child(even) since they're nested, but it is possible using jQuery:

First define your CSS classes:

.e:before {content:'“'}
.o:before {content:'‘'}
.e:after {content:'”'}
.o:after {content:'’'}

Then use jQuery to add the class to every even/odd quote:

$("q:odd").addClass('o');
$("q:even").addClass('e');

Demo

Related questions:

• CSS refer to every odd nested child?
• querySelector with nested nth-child in Chrome doesn't appear to work

How to get the second match with QuerySelector?

Use document.querySelectorAll

document.querySelectorAll('.titanic')[1]

How can I get the CSS Selector in Chrome?

Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.

---

Related Topics