Apply a Class and an Attribute Selector

Combining a class selector and an attribute selector with jQuery

Combine them. Literally combine them; attach them together without any punctuation.

$('.myclass[reference="12345"]')

Your first selector looks for elements with the attribute value, contained in elements with the class.

The space is being interpreted as the descendant selector.

Your second selector, like you said, looks for elements with either the attribute value, or the class, or both.

The comma is being interpreted as the multiple selector operator — whatever that means (CSS selectors don't have a notion of "operators"; the comma is probably more accurately known as a delimiter).

Combining class selector with attribute selector

You don't need the second period, unlike JavaScript the [class*="large-"] isn't compiled to return the found-string, it's simply evaluated as-is:

.button[class*="large-"] {
    font-size: 0.9em;
}

JS Fiddle demo.

Can i use css attribute selector within a SASS class to style itself

Do you want to do this

.test2 {
  & {
    background: lightgreen;
  }

  &[class*="md"] {
    border: 10px solid green;
  }
}

CSS attribute selector for class name

You have some weird slanty quotes going on here. Use normal ASCII quotes, "

.layoutcontainer div[class^="span"]
{
    border:1px solid red;
}

http://jsfiddle.net/ExplosionPIlls/YpmUy/ -- seems to work just fine

Why use an attribute selector to match classes?

The [] syntax is an attribute selector.

a[class="btn"]

This will select any <a> tag with class="btn". However, it will not select <a> which has class="btn btn_red", for example (whereas a.btn would). It only exactly matches that attribute.

You may want to read The 30 CSS Selectors you Must Memorize. It's invaluable to any up-and-coming web developer.

Using two identical attribute selectors [class][class]

[class][class] matches any element that has a class attribute (or, to be more precise, at least one class attribute — see below for why). The only functional difference between [class][class] and [class] is specificity, as each attribute selector contributes its own specificity amount:

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

For reference, here are the specificities of all three example selectors:

/* 1 class, 2 attributes -> specificity = (0,3,0) */
.classname1[class][class]

/* 1 class, 1 attribute  -> specificity = (0,2,0) */
.classname1[class]

/* 1 class               -> specificity = (0,1,0) */
.classname2

An !important declaration under a less specific selector will still override a non-important declaration under this selector. An !important declaration under this selector will override any !important declarations under less specific selectors (or equally specific selectors appearing earlier in the source order).

If the only selector that needed to be overridden was .classname2, then adding two attribute selectors on top of a class selector would indeed be overkill. But for all we know, the author might have intended to override a selector like your intermediate example. Or it might have indeed been a mistake. Only they would know for sure, but these are my educated guesses.

---

The reason [class][class] matches is because it does not require the element to have two class attributes — within a compound selector, all simple selectors are treated independently of each other, and this includes attribute selectors regardless of their names and/or values. Selectors does not specify or presume whether an element can have multiple class attributes — only that an attribute presence selector matches based on the presence of at least one.

Having said that, the spec does contain an informative note with respect to class selectors (i.e. not attribute selectors for the class attribute) suggesting that an element may theoretically have multiple class attributes, although this isn't possible in contemporary HTML. It also states, normatively, that an element can have multiple ID attributes and all of them must be used when matching ID selectors. No such explicit text exists for value-matching with respect to attribute selectors, as multiple IDs are only possible in HTML with different attributes, but it's probably logical to deduce that the same would apply.

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.

Should I add class attributes to Angular component selector tags

The best approach would be apply stlye/class inside your component as container, But you can add classes to the component as well.

CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?

Omit the value part:

.ApplicationName[entityvalue]

This works with IE7+.

If you're paranoid about entityvalue being set to emptiness, and you don't want to include those elements:

.ApplicationName[entityvalue]:not([entityvalue=""])

This does not work with IE7+.

If you do need to cater to that, well, you have some options:

• Define an override/reset style for .ApplicationName[entityvalue=""], so you have one rule with the first selector above, and another rule with this one.

• Use JavaScript to look for elements with the empty attribute and add a class which you can style.

• If you can modify server-side code to output that attribute differently, that's an even easier route to take.

---

Related Topics