Search code examples
htmlcss-selectorsgeb

Using CSS selectors to get first child from a nested element

I am trying to understand CSS selectors better and am fiddling around with Google/Gmail. When you go to Google's home page and enter "gmail", it will automatically present you with search results for that term. I want to write a CSS selector that will find the first one (that is, the link to Gmail, since it should always be the first result). The HTML for these results looks like:

<div class="srg">
  <div class="g">
    <h3 class="r">
      <a href="https://mail.google.com/" onmousedown="return rwt(a bunch of stuff I omitted for brevity)">Gmail - Google</a>

      ...

Based on what I could gather from the W3schools CSS docs, it seems like I want the first <a> child of a class named r, or:

h3.r a:first-child

However, the tool I'm using doesn't recognize this as the first link. So I ask: is this a correct selector for the Gmail (first) link, or did I go awry somewhere?

Solution

  • Well, the anchor element you're referring to is the only child of the h3.r parent.

    So :first-child, :last-child and :only-child would all apply.

    enter image description here

    A simple h3.r > a (child selector) or h3.r a (descendant selector) should suffice, assuming it's unique in the document.

    Your selector – h3.r a:first-child – should, technically speaking, work as well.

    Based on the image above, an attribute selector may also work:

    h3.r a[data-href="https://mail.google.com/"]

    More information: https://www.w3.org/TR/css3-selectors/#selectors