Your Ad Here

advanced code snippet search

Posted By

LeeRJohnson on 08/21/09


Tagged

style attribute CSS3 selector attr


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

vali29
KF


CSS Attribute Selectors

 / Published in: jQuery
 

URL: http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

Attribute selectors let you target an element based on its attributes. You can specify the element’s attribute only, so all the elements that have that attribute — whatever the value — within the HTML will be targeted, or be more specific and target elements that have particular values on their attributes — and this is where attribute selectors show their power.

Expand | Embed | Plain Text 
  1. [att=value]
  2. /* The attribute has to have the exact value specified. */
  3.  
  4. [att~=value]
  5. /* The attribute�s value needs to be a whitespace separated list of words (for example, class=�title featured home�), and one of the words is exactly the specified value. */
  6.  
  7. [att|=value]
  8. /* The attribute�s value is exactly �value� or starts with the word �value� and is immediately followed by �-�, so it would be �value-�. */
  9.  
  10. [att^=value]
  11. /* The attribute�s value starts with the specified value. */
  12.  
  13. [att$=value]
  14. /* The attribute�s value ends with the specified value. */
  15.  
  16. [att*=value]
  17. /* The attribute�s value contains the specified value. */

Report this snippet  

You need to login to post a comment.