Styling Full-size Photos and Thumbnails Differently - CSS3

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

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.

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.

The photos now have unique styling to make them look Polaroid-esque

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

CSS3 Topics