How do you define attribute selectors in SASS?

Question

input[type=submit] {
  // properties
}

It's a very useful for styling form buttons.

How do you do the same thing in SASS?

I only use SCSS and it works fine in that case. – Jan 25 '11 at 02:50 — , Jan 25 '11 at 02:50

score 184 · Accepted Answer · edited Jan 26 '12 at 17:21

184

You can also nest it like this

input
  &[type="submit"]
    .... 
  &[type="search"]
    ....

edited Jan 26 '12 at 17:21

Peter DeWeese

18,141
8
79
101

answered Sep 01 '11 at 08:56

Rajeesh

4,377
4
26
29

I like this approach a lot since you'd often do this kind of thing to serve the right image from a sprite, in a toolbar or set of social links. – Jasper Kennis Apr 11 '12 at 15:06
3

Adding double quote doesn't work. This shouldn't be correct answer. – Terry Lin Nov 27 '17 at 05:49
2

&[type='submit'] – user3260487 Jan 29 '19 at 08:32
2

Can someone put out a FULL and complete correct answer including some values being set? – Alexander Ryan Baggett Dec 02 '20 at 16:57

score 29 · Answer 2 · edited Jun 03 '21 at 14:40

29

This converter website says:

input[type=submit]
  // properties

edited Jun 03 '21 at 14:40

DaFois

2,197
8
26
43

answered Jan 25 '11 at 01:42

Craig Walker

49,871
54
152
212

2

The link is Broken – Marcelo Velasquez Nov 19 '20 at 20:51

Quang Dong · Answer 3 · 2021-10-05T04:48:39.977

-1

I use the one below in my project.

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

The :enable has the same meaning as :not(:disabled)

edited Oct 05 '21 at 04:48

answered Oct 05 '21 at 04:34

Quang Dong

467
5
7

How do you define attribute selectors in SASS?

3 Answers3

Linked

Related