残念ながら、これは単一の CSS セレクターでは不可能です。
「祖父母の div がある」という基準には、セレクター レベル 4 で導入されたサブジェクト セレクターが必要です。これにより、次のセレクターが生成されます (「タイトル付き」は「title
等しい属性を持つ」ことを意味すると仮定します)。
div.bar.baz > * > !div > * > div[title="foo"]
また、ページ全体で n 番目または唯一の要素を選択する方法がないため、CSS セレクターを使用して最初の基準を満たすことはできません。言うまでもなく、現在 Selectors 4 を実装するブラウザーがないため、上記はとにかく機能しません。
代わりに DOM トラバーサルまたは XPath を使用した方がよいでしょう。私が考えている XPath 式はもっと複雑ですが、ページ全体で唯一の要素を見つけることができます (それが正しければ...自分のページでテストする必要があるかもしれません):
(
//div[contains(concat(' ', @class, ' '), ' bar ') and contains(concat(' ', @class, ' '), ' baz ')]
/*
/div[child::*/child::div[@title="foo"]]
)[1][last()]
class
祖父母の属性で完全に一致するものを探している場合は、代わりに次の XPath を使用します (これも未テストです)。
(
//div[@class="bar baz"]
/*
/div[child::*/child::div[@title="foo"]]
)[1][last()]