Specify Multiple Attribute Selectors in Css

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] {
}

Can I use multiple [element= ... ] attribute selectors in CSS?

Multiple attribute selectors are allowed but there is no [attr!=value] attribute selector.

You could use :not() pseudo-class to exclude [href="#"] from the selector:

a[href^="#"]:not([href="#"]):after {
    content: ' \f14c';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

It's worth noting that :not() pseudo-class works on IE9+

WORKING DEMO.

Alternatively for IE8 (while DOCTYPE is declared), you could also override the applied styles for the [href="#"] selector as follows:

a[href^="#"]:after {
    content: ' \f14c';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

a[href="#"]:after {
    content: none;
}

UPDATED DEMO.

Multiple attribute selectors in SCSS

An @each loop would be another way to write this:

$directions: left right bottom top;
@each $i in $directions {
  [no-padding*="#{$i}"] {
    padding-#{$i}: 0 !important;
  }
}

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.

Why aren't my multiple CSS attribute selectors working?

As per the documentation this matches when type=email AND type=text which can't be true.

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; }

You would need to include both versions;

form input[type=text],
form input[type=email] {
    background-color: #f0f0f0;
}

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 way to include multiple attributes inside a bracket selector?

Besides removing the "[type=...]" as Abdul Hannan suggested, the only shorter way I can think of to express this would be the following:

.my-form input[type="text"],
.my-form input[type="email"]{
    padding: 8px;
    width: 100%;
}

How to find_elements with multiple attributes using cssSelector Python and Selenium

This error message...

SyntaxError: invalid syntax. Perhaps you forgot a comma?

...implies that the css_selector you have used contains a SyntaxError.

Deep Dive

There are two approaches to write css-selectors as follows:

• Either you mention the value of the attributes within single quotes i.e. '...' and the entire locator within double quotes i.e. "...". Example:

  "tag_name[attribute_name='attribute_value']"
  

• Or you mention the value of the attributes within double quotes i.e. "..." and the entire locator within single quotes i.e. '...'. Example:

  'tag_name[attribute_name="attribute_value"]'
  

Solution

To identify all the elements having <a href=....> within <div id="contents" ...> you can use the following locator strategy:

elements = driver.find_elements(By.CSS_SELECTOR, "div[id='contents'] a[href]")

However, incase of css_selector:

• class attributes can be shortened as .element_class
• id attributes can be shortened as #element_id

So precisely, your locator strategy can be:

elements = driver.find_elements(By.CSS_SELECTOR, "div#contents a[href]")

Getting Granular

To be more canonical, you may like to consider the id attribute of the <a> element as well i.e. thumbnail. So effectively the locator strategy would be:

elements = driver.find_elements(By.CSS_SELECTOR, "div#contents a#thumbnail[href]")

How to have multiple values inside a CSS tilde attribute selector?

Is the new selector :is

a:is(.logo1, .logo2) {
  background: gold;
}

<ul>
  <li><a href="#internal" id="internal">Internal link</a></li>
  <li><a href="http://example.com" class="logo1">Logo 1</a></li>
  <li><a href="#InSensitive" class="logo2">Logo 2</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
  <li><a href="https://temp.org">Example exact match</a></li>
</ul>