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 trialRyan Carson
23,287 PointsIn 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
231,268 PointsIn 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
7,837 PointsIn 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
23,287 PointsThanks Ron! Really appreciate the quick response.
Chris Southam
1,823 PointsI'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
10,033 PointsYeah, 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?
Christopher Mayfield
19,928 PointsChristopher Mayfield
19,928 PointsGreat response, thanks!