Square brackets in CSS [duplicate]

Question

This question already has an answer here:

• Why use an attribute selector to match classes? 2 answers

What does it mean when something between square brackets in CSS? E.g.

input[type="radio"]

Answer 1

Square brackets are attribute selector syntax.

Your (complete) example means "Select elements of type input which have a type attribute with the value radio" e.g. <input type="radio">

Answer 2

It's a attribute selector in CSS

E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".

more on http://www.w3.org/TR/CSS2/selector.html

Answer 3

This is a CSS attribute selector that will only select inputs with the type set to radio, that is, it will select all of the radio buttons. Here's an article explaining it a bit more.

Answer 4

This is an attribute selector. It selects elements that have the specified attribute. You can find out more about them here: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

In your example: input[type="radio"]

This would match an element that looked like this:

<input type='radio'>

The selector you've given in the question means it would need all three words: The element name 'input', the attribute 'type' and the value for that attribute being 'radio'.

Browser compatibilty: This is a standard selector that is available in all browsers in common use. The only browser you may need to worry about that doesn't support it is IE6. See here for compatibility charts for this and other CSS selectors.

Hope that helps.