Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,716
    Member #
    5580
    Liked
    717 times
    I've used CSS for a while now, and just started playing around
    with CSS Selectors. Not something new, but with IE7 coming
    on-board, these will become more popular.

    Firefox and IE7 users (sorry IE5 and IE6 won't see these selectors) ...


    Use the attached .gif image in this example:

    <html>
    <head><title>CSS Tricks - pdf icon</title>
    <style>
    a[href $='.pdf'] {
    padding-right:18px;
    background: transparent url(pdf.gif) no-repeat center right;
    }
    img[src $='.gif'] {
    border:2px solid #000;
    }
    </style>
    </head>
    <body>
    This is how to automatically put a PDF image next to any link that is a PDF file.<br /><br />
    <a href="myfile.pdf">My PDF File</a>
    <br /><br />
    Solid border only around a .gif type image ... <br />
    <img src="pdf.gif" width="18" height="18" alt="" />
    </body>
    </html>



    Whenever a link is found that contains .pdf, it automatically puts the PDF icon at the end.

    Also, in the example, if it finds a .gif image, put a border around it... but not .jpg images.


    Here's the official CSS Selector Manual:
    http://www.w3.org/TR/REC-CSS2/selector.html


    Have Fun!
    Attached Images Attached Images


  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, these are so incredibly useful. Amongst other things, such selectors can also be used to specifically target form buttons (input type="submit") separately from other input fields without using a special CSS class for them (the selector would be [minicode]input[type='submit'][/minicode].

    Might want to specify that what you're talking about are specifically attribute selectors, though. Subsets of CSS selectors have been supported in IE for some time now, as that's the fundamental way to tie a style to an element in CSS (plain old [minicode]input[/minicode] is also a CSS selector).

  4. #3
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Thanks for the info!
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com