Succinct Way of Specifying Two or More Values for an Attribute in CSS Selector

Simplifying comma separated CSS selectors with common prefix/suffix

As per the comments, this is simply not possible with plain CSS right now. Your only option to shorten the selector is to use a pre-processor, like SASS (Syntactically Awesome StyleSheets). SASS allows you to write more readable, shorter code. You can compile a SASS (*.scss) file to plain CSS on your own computer, so by the time it's on the server, it's the plain old CSS you are used to, understood by all browsers. No extra requirement from your users.

For this particular case, you could use a for-each loop.

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
  html:lang(qw) div[data-domain*='#{$domain}'] {
    display: none !important;
  }
}

This would result in the following CSS:

html:lang(qw) div[data-domain*='abc.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='def.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='ghi.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='jkl.com'] {
  display: none !important;
}

Can CSS attribute selectors for boolean attributes be written more concisely?

As @JoshC writes in a comment, you can simply use input[readonly]. This CSS selector (which is ignorant of all markup serialization issues) matches an input element that has the readonly attribute, no matter what its value is. The XHTML (XML) requirement that every attribute specification must include a value does not affect this.

CSS Performance between class and attribute selectors

There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.

Specificity - Specificity determines, which CSS rule is applied by browsers.

If two selectors apply to the same element, the one with higher specificity wins.

But specificity has hierarchy.

1. Inline styles (Presence of style in document).
   An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.
2. IDs (# of ID selectors)
   ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
   This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).
   Including for instance :before and :after.

Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Hence div.test {} is more specific.

How Do I Select for Multiple Classes Using Nokogiri and Ruby

Use two selectors: report.css("table.data tr.odd, table.data tr.even")

The ~= operator in a CSS attribute selector checks that the value matches a space-delimited list of classes. For instance, tr[class~=odd] would match <tr class="odd"> and <tr class="odd ball">. However, in the specific case of the class attribute, the better selector is simply tr.odd.

If you use the ~= operator with a space in the value (as in tr[class~="odd even"], the selector will never match anything.

CSS Selector [type=var] not selecting lower-alpha versus upper-alpha

From the site you link to:

The value specified in an attribute selector is case sensitive if the attribute value in the markup language is case sensitive. Thus, values for id and class attributes in HTML are case sensitive, while values for lang and type attributes are not.

You are using a type attribute, which seems to be case-insensitive. Hence, with pure CSS, it's impossible to differentiate.

You might be stuck using JavaScript.

EDIT: Here's some JS to differentiate and add classes, a and A, respectively:

var alphaLists = document.querySelectorAll('ol[type="a"]');
for (var i = 0; i < alphaLists.length; i++) {
    if (alphaLists[i].type == 'a') {
        alphaLists[i].className += ' a';
    }
    if (alphaLists[i].type == 'A') {
        alphaLists[i].className += ' A';
    }
}

Fiddle

How to define multiple CSS attributes in jQuery?

Better to just use .addClass() and .removeClass() even if you have 1 or more styles to change. It's more maintainable and readable.

If you really have the urge to do multiple CSS properties, then use the following:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB!

Any CSS properties with a hyphen need to be quoted.

I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.

---

Related Topics