tailieunhanh - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P8

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P8:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Navigation 117 head body p Lorem ipsum dolor sit amet a href consectetur adipiscing elit a . Aenean porta. Donec eget quam. Morbi ut justo vehicula elit feugiat lacinia. Morbi ac quam. a href http Sed venenatis a lectus quis porta viverra lectus sapien tempus odio ac volutpat mi dolor ac elit. p body html We can use a CSS3 selector to target the link that starts with http and add an icon to it chapter04 a href A http padding-left 20px background-image url background-repeat no-repeat Lorem ipsum dolor sit amet consecteturadipiscina elit. Aenean porta. Donec eget quam. Morbi libero. Curabitur ut justo vehicula elit feugiat lacinia. Morbi acquam. fa Sed venenatis. lectus quis porta viverra lectus sapien tempus odio ac volutpat mi dolor ac elit. Figure . The external link displays with an icon Any links on our page that start with http which should be external as it is unnecessary to link to pages on our own site like that will display with the world icon. Discussion This CSS3 attribute selector is widely supported in modern browsers although it will be ignored in Internet Explorer 6. In browsers that lack support for this selector the link will just display as normal so it s a nice enhancement for browsers with support but leaves the experience unchanged for those with older browsers. Download at 118 The CSS Anthology Let s take a closer look at that selector a href A http . The attribute that we re selecting is the href attribute and we want our selector to match when it finds the text http at the beginning of the attribute value. The a operator means begins with . You could use a similar selector to match all email links for example a href A mailto . Another useful attribute selector is to select on the file extension of a link. This means you can add a small icon to show that a document is a PDF or other document type depending on the extension. The selector a href