Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 selector for attribute that is "has ANY value and is not null or blank"

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=‌​""])')
like image 448
Travis Avatar asked Feb 29 '16 19:02

Travis


People also ask

What are the 3 types of selectors in CSS?

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)

What are attribute selectors in CSS?

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.

Can we use contains in CSS selector?

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).


2 Answers

[data-group-id]:not([data-group-id=""])

This will select an element that has the attribute, as long as it is not blank.

like image 138
Scimonster Avatar answered Oct 19 '22 12:10

Scimonster


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.

like image 45
Michael Benjamin Avatar answered Oct 19 '22 10:10

Michael Benjamin