Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a CSS selector for elements lacking an attribute?

I understand that css rules can target elements specified by attribute values, e.g.:

input[type="text"] {}

Can I make a rule that targets elements which omit a certain attribute? For example, can I target elements that lack an href or elements that don't specify a type?

like image 442
JellicleCat Avatar asked Aug 23 '11 19:08

JellicleCat


People also ask

How can we select elements with a specified attribute in CSS?

The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".

How do you exclude an element in CSS?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.

Which CSS selector has the lowest specificity?

We use element selectors like a , p , and div to style a selected element, while pseudo-elements like ::after and ::before are used to style specific parts of an element. Element and pseudo-element selectors have the lowest specificity. In the specificity weight system, they have a value of 1.


3 Answers

You can follow this pattern:

a:not([href])
input:not([type])

The attribute selector is used to select elements with the specified attribute.

:not is supported in all modern browsers and IE9+, if you need IE8 or lower support you're out of luck.

like image 76
thirtydot Avatar answered Oct 26 '22 05:10

thirtydot


For links you can simply use:

a { color: red; }
a:link { color: green; }

fiddle: http://jsfiddle.net/ZHTXS/ no need for javascript.

For form attributes, use the not attribute pattern noted above input:not([type]) and if you need to support older versions of IE, I'd probably add a class and use an IE specific style sheet linked with conditional comments.

like image 38
steveax Avatar answered Oct 26 '22 04:10

steveax


You can always set different style to a and a href

Check this: http://jsfiddle.net/uy2sj/

like image 40
morsik Avatar answered Oct 26 '22 05:10

morsik