I can't seem to find a css3 wildcard for 'any value not null or blank'.
I have a bunch of divs, some of them have an attribute called data-group-id
but not all. I want to find all divs that have a that attribute, data-group-id`, and is not blank.
So for example I have these divs:
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required="1"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required="1"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="55"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="55"></div>
<div class="col-md-2 custom_boxshadow" data-role="mergeSelector" data-required data-group-id="15"></div>
As you can see, the last 3 divs have an attribute called data-group-id
.
I want to have a selector that finds those three elements. Essentially I'm trying to do this logic
$parent.find('div[data-role="mergeSelector"][data-group-id="*"]')
where * is a wild card saying 'has a value but doesn't matter what the value is'.
Is there a selector that exists to accomplish this? I can't find anything on the internet.
Thanks!
Thank you for the help, finished query is as follows:
$parent.find('div[data-role="mergeSelector"][data-group-id]:not([data-group-id=""])')
Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state)
The CSS Attribute Selector is used to select an element with some specific attribute or attribute value. It is an excellent way to style the HTML elements by grouping them based on some specific attributes and the attribute selector will select those elements with similar attributes.
A custom built CSS selector for more advanced users can be built using the "contains" selector. The "contains" selector is useful in cases where we are looking for an element that "contains" some text (case sensitive).
[data-group-id]:not([data-group-id=""])
This will select an element that has the attribute, as long as it is not blank.
You wrote:
...where
*
is a wild card saying has a value but doesn't matter what the value is.
Here you go:
div[data-group-id] { ... }
From the spec:
6.3.1. Attribute presence and value selectors
[att]
Represents an element with the
att
attribute, whatever the value of the attribute.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With