CSS: Select elements that contain another selector
CSS4 comes with
:has
Show archive.org snapshot
. E.g. h1:has(b)
would select all <h1>
tags that contain a <b>
tag.
This is implemented in no browser Show archive.org snapshot but the jQuery query engine already supports it Show archive.org snapshot as a custom extension.
Related cards:
Use jQuery's selector engine on vanilla DOM nodes
There are cases when you need to select DOM elements without jQuery, such as:
- when jQuery is not available
- when your code is is extremely performance-sensitive
- when you want to operate on an entire HTML document (which is hard to represent ...
Spreewald: Check that a CSS selector is present on the current page
Spreewald 1.3.0 comes with these steps:
Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"
We recommend to [define a selector_for
method](https://githu...
Selector for finding the currently selected option in a <select> tag
Use option:checked
to find the currently selected option:
select.querySelector('option:checked')
Yes, :checked
, not :selected
.
This is the same as finding an option with the { selected: true }
property in JavaScript:
sele...
Test that a CSS selector is present with Cucumber
This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:
Then I should see an element "#sign_in"
But I should not see an element "#sign_out"
Here is the step definition for C...
How to find child nodes that match a selector with JavaScript
Using querySelector
or querySelectorAll
in JavaScript, you can easily find descendants of a node that match a given selector.
But what if you want to find only children (i.e. direct descendants) of an element?
Easy: use :scope
. It referen...
Capybara: Find an element that contains a string
There is no CSS selector for matching elements that contains a given string ยน. Luckily, Capybara offers the :text
option to go along with your selector:
page.find('div', text: 'Expected content')
You can also pass a regular expre...
An auto-mapper for ARIA labels and BEM classes in Cucumber selectors
Spreewald comes with a selector_for
helper that matches an English term like the user's profile
into a CSS selector. This is useful for steps that refer to a particular section of the page, like the fol...
An auto-mapper for BEM classes in Cucumber selectors
When you are using the #selector_for
helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding...
CSS: :where() pseudo selector
tl;dr
The
:where()
pseudo selector - zero specificity - matches against a comma-separated list of selectors.
Example
Compound selectors like ...
.datepicker .prev, .datepicker .next, .datepicker .switch
padding-botto...
CSS: :is() pseudo selector
tl;dr
The
:is()
pseudo selector - specificity of its most specific argument - matches against a comma-separated list of selectors.
Example
Compound selectors like ...
.datepicker .prev, .datepicker .next, .datepicker ....