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:
<a href="https://mail.google.com/" onmousedown="return rwt(a bunch of stuff I omitted for brevity)">Gmail - Google</a>
Well, the anchor element you're referring to is the only child of the
:only-child would all apply.
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:
More information: https://www.w3.org/TR/css3-selectors/#selectors