CSS Attribute Selector: Apply Class If Custom Attribute Has Value? Also, Will It Work in IE7+

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.

How to add display:none for custom attribute

You can try the CSS Attribute Selector.

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

Try this:

input[myAttr="cusAttr"]{
    display:none;
}

Custom attribute selector not working in IE11

The problem was in React library that I was using which created those custom attributes and it put some "invisible" characters at the beginning/end of the custom attribute. When I was comparing strings of tempSearchString and attribute that I was trying to catch they looked the same in writing but Text Compare still found a difference. I decided not to use this library and wrote my own code for that problem.

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

---

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

Is it possible to apply different CSS properties to tags that have no id and class?

Use the :nth-child() pseudo-class:

.box span:nth-child(1) {
  font-size: 28px;
}

.box span:nth-child(2) {
  font-size: 18px;
}

Alternatively, you can use :first-child and :last-child if you know there will always be two.

Is there a way to use variable CSS selector which can selectively apply css to html element which has classes which is a variable?

You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:

document.querySelectorAll('span.test').forEach(  span =>  span.addEventListener('click', () => {      console.log(`you clicked ${span.innerText}`)       span.classList.toggle('on')  }))

.test {  background: red;  color: white;  display: inline-block;  padding: 40px;}
.test.on {  background: green;}

<span class="test">foo</span><span class="test">bar</span><span class="test">baz</span>

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.

css selector to match an element without attribute x

:not selector:

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

Support: in Internet Explorer 9 and higher

---

Related Topics