Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Selectors Basic Attribute Selectors

Posted by Ryan Carson
Ryan Carson
23,287 Points

In CSS, why use Attribute Selectors, instead of Classes?

I'm learning about Attribute Selectors and I don't understand why you would use them, instead of Classes.

Here are some examples ...

.input-text {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    width: 250px;
    border: 2px solid steelblue;
}
<form>
  <input class="input-text" type="text" name="name" placeholder="name" />
  <input class="input-text" type="text" name="email" placeholder="email" />
    <input type="submit" name="submit" />
</form>

versus

input[type="text"] {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    width: 250px;
    border: 2px solid steelblue;
}
<form>
  <input type="text" name="name" placeholder="name" />
  <input type="text" name="email" placeholder="email" />
    <input type="submit" name="submit" />
</form>

4 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

In an example where all elements with the same attribute are assigned the same class, and no other elements are assigned that class, it makes no difference. But in more complex real-life HTML, there would likely be many elements with the same attributes and only some of them would be assigned a particular class. And, there may be elements with entirely different attributes also assigned to that class. In that case, the functional difference between selectors will be very obvious.

The organization of the HTML document impacts the final outcome as much or more than the CSS. Logical organization of the HTML document will allow it to work with the CSS to create an attractive presentation. Chaotic organization in the HTML, including improper or over-use of class attributes, can create a situation where no CSS can be constructed to produce the desired result.

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

In my work I use attribute selectors when I'm dealing with existing websites and there are not specific classes on certain elements I want to target. Instead of trying to locate every instance of an element and adding a class I will use the attribute selector. The other time I use attribute selectors is when I'm trying to target the "state" of an element without writing javascript (jQuery) to add or change a class. This way you can provide different styling to an element when it's checked, selected, or otherwise.

Ryan Carson
Ryan Carson
23,287 Points

Thanks Ron! Really appreciate the quick response.

Chris Southam
Chris Southam
1,823 Points
Chris Southam
Chris Southam
1,823 Points

I've always steered clear of attribute selectors unless I absolutely have to purely because I believe they are slower to interpret than a plain class. Having said that I learnt that many years ago when browsers were a different beast.

Philip Harper
Philip Harper
10,033 Points
Philip Harper
Philip Harper
10,033 Points

Yeah, I first found attribute selectors quite confusing over classes—but you could set a rule where an external link a [target="_blank"] could display an icon to denote the link would open to another window?

Is that right?