Select Elements by Attribute in Css

How to select any element that has an attribute equal to red in css3?

Use that same attribute selector, but without any element before attached to it

Represents an element with an attribute name of attr and whose value
is exactly "value".

It will select any element with the [data-color='red']

Note: even using the '' (which is different than ""), it will still select "" anyhow.

[data-color='red'] {  background: red;  display: block}

<div data-color='red'>red</div><p data-color='red'>red</p><article data-color='red'>red</article><section data-color='red'>red</section><h1 data-color='red'>red</h1><span data-color='red'>red</span>
<hr />
<div data-color="red">red</div><p data-color="red">red</p><article data-color="red">red</article><section data-color="red">red</section><h1 data-color="red">red</h1><span data-color="red">red</span>

CSS select element with particular child element attribute

I tried your complex selector in CSS, plain JS and using the jQuery lib... Guess who wins!

// Checking if JS handles that selector....

// Let's have the selector in a variable, just to make sure the same is tried in both cases...
let ourSelector = ".wp-block-image figure.alignright:has(img:not([src*='triangle']))"

// JS querySelector
try{
  document.querySelector(ourSelector).style.border = "3px solid blue";
}
catch(error){
  console.log(error.message);
}

// jQuery! (--WORKS--)
$(ourSelector).css("border", "3px solid blue");

/* This rule applies */
.wp-block-image figure.alignright img:not([src*="triangle"]) {
  border: 3px solid red;
}


/* This one not */
.wp-block-image figure.alignright:has(img:not([src*="triangle"])) {
    opacity: 0.2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp-block-image">
  <figure class="alignright">
    <img width="387" height="500" src="https://via.placeholder.com/300x300.jpg?text=triangle" />
  </figure>
  <figure class="alignright">
    <img width="387" height="500" src="https://via.placeholder.com/300x300?text=square" />
  </figure>
</div>

Select elements by attribute in CSS

If you mean using an attribute selector, sure, why not:

[data-role="page"] {
    /* Styles */
}

There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",

browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and
you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.

Select elements with same attribute value

no, there is no way to achieve this using css

however, if you need to do something like this you should consider changing your markup (ex. using additional classes) - css is not a programming language

Is there a CSS selector for any attribute with a specific value?

The simple answer is NO. We have to use any of the Basic Selectors or attribute selector.

Here is the list of all the CSS selectors.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

You cannot find any of the value selector :)

How do I target elements with an attribute that has any value in CSS?

The following will match any anchor tag with a rel attribute defined:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Update:
To account for the scenario @vsync mentioned, in the comment section (differentiating between emtpy/non-empty values), you could incorporate the CSS :not pseudo-class:

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not