21

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

input[type="radio"]

codingbadger
  • 42,678
  • 13
  • 95
  • 110
Alexander Reich
  • 283
  • 1
  • 2
  • 3
  • 16
    What a way to welcome new users. Sheesh. Took like 10 seconds to use Google Translate. Lets at least give the new guys a small chance. Everyone was a noob once. – codingbadger Apr 16 '13 at 15:38
  • 1
    [Attribute Selectors](http://www.w3.org/TR/selectors/#attribute-selectors) – thgaskell Apr 17 '13 at 08:45
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines uses square brackets to name grid lines. I don't understand how that works. They are not attribute selectors, I think. – David Spector Oct 23 '20 at 14:28

4 Answers4

19

It's an 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

Robert
  • 19,800
  • 5
  • 55
  • 85
11

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">

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
1

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.

Pankucins
  • 1,690
  • 1
  • 16
  • 25