CODEWITHSUNDEEP
cssattributescss-selectorssass
Craig Walker
Craig Walker

Reputation: 51727

How do you define attribute selectors in SASS?

In CSS, you can do this:

input[type=submit] {
  // properties
}

It's a very useful for styling form buttons.

How do you do the same thing in SASS?

Upvotes: 105

Views: 103906

Answers (3)

Quang Dong
Quang Dong

Reputation: 497

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)

Upvotes: -1

Craig Walker
Craig Walker

Reputation: 51727

This converter website says:

input[type=submit]
  // properties

Upvotes: 29

Rajeesh
Rajeesh

Reputation: 4485

You can also nest it like this

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

Upvotes: 191

Related Questions