Another great use of attribute selectors in our page is to give the photos a different style than the map thumbnail. To do this without CSS3, we could simply give the thumbnail a class and apply unique styles to this class. This would be quite easy in this particular page. But using classes is not always so simple in the real world.
The Trouble with Classes
While classes have many legitimate uses, they do have some problems that make them difficult to use in some situations.
Classes add bulk to your HTML. In our example, adding one class isn’t going to hurt anyone, but in much larger pages and sites with more complex styles, a lot of extra classes could be necessary, adding a good chunk to the file size. Any time you can avoid adding classes and IDs to the HTML and use another way to reliably target elements instead, you should do so.
Markup may be controlled by a CMS or plugin, making it impossible for you to add classes to the HTML.
Your client may be the one adding content, and you can’t count on him to remember to assign the proper classes.
You may not be allowed to touch the HTML if you’re just the CSS developer on a project, or if you’ve been brought into an existing project just to make a few style updates.
Classes can be time-consuming to add to an existing site with tons of pages, if you’re trying to go back and add new styles. It’s much easier to write CSS that takes advantage of whatever HTML is already there, without your having to go back and add extra style hooks into the HTML.
Attribute selectors browser support
Using Attribute Selectors to Target by Type
As long as there is some reliable difference between the HTML used for the thumbnails and the photos, we can tap into that difference with attribute selectors. In this case, the distinction is that the map thumbnail is saved in the folder named “thumbnails” and the photos are saved in the folder named “photos.” The folder name is part of the path in the src attribute, so we can use attribute selectors to target each image type independently via particular src attribute values.
Let’s start by floating the map thumbnail left instead of right:
The * attribute selector tells the browser “find every src attribute that has ‘thumbnails’ somewhere within it.” This matches the map image:
The map thumbnail is now floating left, instead of right like the other images.
Now let’s add some styling to the photos to make them look like Polaroid pictures. Add the following new rule:
Now all the photos have a white border around them, a drop shadow behind them, and a slight angle.
The photos now have unique styling to make them look Polaroid-esque.
CSS3 Related Interview Questions
|XML Interview Questions||CSS3 Interview Questions|
|HTML Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||WordPress Interview Questions|
|Pure.CSS Interview Questions||XHTML Interview Questions|
The Css3 Lowdown
Styling Images 150 And Links By Type
Improving Efficiency Using Pseudo-classes
Different Screen Size, Different Design
Flexing Your Layout Muscles
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.