CSS How to Target 2 Attributes

CSS how to target 2 attributes?

input[type=submit][value=Delete]

You're chaining selectors. Each step narrows your search results:

input

finds all inputs.

input[type=submit]

narrows it to submits, while

input[type=submit][value=Delete]

narrows it to what you need.

Specify multiple attribute selectors in CSS

Simple input[name=Sex][value=M] would do pretty nice. And it's actually well-described in the standard doc:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier.

JSFiddle Demo

CSS - How to select multiple attribute values?

This is not possible in the standard CSS. It is convenient to use a CSS preprocessor like SASS or LESS which allow you creating loops among many other features. An example with SASS:

$selector: '.div';
@for $i from 1 to 10 {
    $selector: $selector + '[line-number=' + $i + ']';
}

#{$selector} {
    // style
}

In pure CSS you are doomed to use this solution instead:

.div[line-number=1], .div[line-number=2], .div[line-number=3], .div[line-number=4], .div[line-number=5], .div[line-number=6], .div[line-number=7], .div[line-number=8], .div[line-number=9], .div[line-number=10] {
}

Target hyphenated attributes with CSS

The first example is the correct example:

a[liquid-goodness="milk"]{ color:red; }

Thanks to David Thomas

Additional resource with examples:

http://css-tricks.com/multiple-attribute-values
(Thanks, Josh Palmeri)

Data attributes with css selectors

you have to add this attribute to the div then hide it:

[data-id="b5c3cde7-8aa1"]  {    display:none;}

<div data-id="b5c3cde7-8aa1">hide me</div>

CSS attribute selector, multiple classes, wildcards applied to one class definition possible?

Sorry, this is not doable with selectors alone given your current situation. Attribute selectors don't have a way of using wildcards in the middle of a value nor can they allow checking of individual components in a space-separated attribute, nor do class selectors provide such functionality. You could consider this a design flaw of AngularJS or one of CSS, but whatever it is, it's not doable with a pure CSS selector.

You will have to work around this a different way. As mentioned in the comments, you can easily hook on to ng-class to add custom classes to make selecting easier, or as suggested in another answer, consider using data attributes to store validation information instead.

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

---

Related Topics