Home arrow Style Sheets arrow Page 7 - Learn CSS, Selectors, part 2
STYLE SHEETS

Learn CSS, Selectors, part 2


In the first article covering selectors, we discussed the CSS group, universal, class and ID selectors. In this article, we continue our discussion of selectors with various attribute selectors.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 22
June 13, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, Selectors, part 2
  2. · The Attribute Selector
  3. · Specific-Value Attribute Selector
  4. · The Specific-Values Attribute Selector
  5. · The Begin With Specific-Value Attribute Selector
  6. · The End With Specific-Value Attribute Selector
  7. · The Contain-Value Attribute Selector

print this article
SEARCH DEVARTICLES

Learn CSS, Selectors, part 2 - The Contain-Value Attribute Selector
(Page 7 of 7 )

This attribute selector applies the styling rule if the attribute's value contains a specific string. Use the * symbol, followed by the equal sign, followed by the string. Let's look at an example. Suppose we need to style all the anchors that have the href attribute's value and contain the string "w3". Add the following CSS code to the file (don't replace it, add it):

a[href*="w3"]
{
font-style: italic;
}

This rule applies a font-style italic (we will discuss this property in detail later in the series) to any anchor element that has the attribute href and contains the string w3. If you open the same page without any modification you will find that the two links to the www.w3.org website have been rendered in italic.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials