<p><a href="http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors" rel="noreferrer">CSS Attribute selectors</a> allow the selection of elements based on attribute values. Unfortunately, I've not used them in years (mainly because they're not supported by all modern browsers). However, I remember distinctly that I was able to use them to adorn all external links with an icon, by using a code similar to the following:</p>

<pre><code>a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}
</code></pre>

<p>The above code doesn't work. My question is: <strong>How does it work?</strong> How do I select all <code>&lt;a&gt;</code> tags whose <code>href</code> attribute starts with <code>"http"</code>? The official CSS spec (linked above) doesn't even mention that this is possible. But I do remember doing this.</p>

<p>(<em>Note</em>: The obvious solution would be to use <code>class</code> attributes for distinction. I want to avoid this because I have little influence of the way the HTML code is built. All I can edit is the CSS code.)</p>

[{'answer_id': 49373, 'author': 'Antti Kissaniemi', 'author_id': 2948, 'author_profile': 'https://Stackoverflow.com/users/2948', 'pm_score': 6, 'selected': True, 'text': '<p>As for CSS 2.1, see <a href="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors" rel="noreferrer">http://www.w3.org/TR/CSS21/selector.html#attribute-selectors</a></p>\n\n<p>Executive summary:</p>\n\n<pre>\n    Attribute selectors may match in four ways:\n\n    [att]\n    Match when the element sets the "att" attribute, whatever the value of the attribute.\n    [att=val]\n    Match when the element\'s "att" attribute value is exactly "val".\n    [att~=val]\n    Match when the element\'s "att" attribute value is a space-separated list of\n    "words", one of which is exactly "val". If this selector is used, the words in the \n    value must not contain spaces (since they are separated by spaces).\n    [att|=val]\n    Match when the element\'s "att" attribute value is a hyphen-separated list of\n    "words", beginning with "val". The match always starts at the beginning of the\n    attribute value. This is primarily intended to allow language subcode matches\n    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).\n</pre>\n\n<p><a href="http://www.w3.org/TR/css3-selectors/#selectors" rel="noreferrer">CSS3 also defines a list of selectors</a>, but <a href="http://rakaz.nl/item/how_well_do_browsers_support_css_selectors" rel="noreferrer">the compatibility varies hugely</a>. </p>\n\n<p>There\'s also <a href="http://tools.css3.info/selectors-test/test.html" rel="noreferrer">a nifty test suite</a> that that shows which selectors work in your browser.</p>\n\n<p>As for your example,</p>\n\n<pre><code>a[href^=http]\n{\n    background: url(external-uri);\n    padding-left: 12px;\n}\n</code></pre>\n\n<p>should do the trick. Unfortunately, it is not supported by IE.</p>\n'}, {'answer_id': 49462, 'author': 'Bobby Jack', 'author_id': 5058, 'author_profile': 'https://Stackoverflow.com/users/5058', 'pm_score': 2, 'selected': False, 'text': '<p>Note that, in Antti\'s example you\'d probably want to add a catch for any absolute links you may have to your own domain, which you probably <strong>don\'t</strong> want to flag as \'external\', e.g.:</p>\n\n<pre><code>a[href^="http://your.domain.com"]\n{\n    background: none;\n    padding: 0;\n}\n</code></pre>\n\n<p>And you\'d want this <strong>after</strong> the previous declaration.</p>\n\n<p>You might also want to include the full protocol prefix, just in case you have a local document named "http-info.html" that you wish to link to, e.g.:</p>\n\n<pre><code>a[href^="http://"]\n{\n    background: url(external-uri);\n    padding-left: 12px;\n}\n</code></pre>\n\n<p>Note that, in both these slightly-more complex cases, you should quote the value. These work, for me, in IE7.</p>\n'}, {'answer_id': 20713770, 'author': 'dcarps14', 'author_id': 3006805, 'author_profile': 'https://Stackoverflow.com/users/3006805', 'pm_score': 3, 'selected': False, 'text': '<p>Antti\'s answer is sufficient for selecting anchor\'s whose href\'s begin with <strong>http</strong> and gives a perfect rundown on the available CSS2 <em>regex-esque</em> attribute selectors, like so:</p>\n\n<blockquote>\n<pre><code>Attribute selectors may match in four ways:\n\n[att]\nMatch when the element sets the "att" attribute, whatever the value of the attribute.\n[att=val]\nMatch when the element\'s "att" attribute value is exactly "val".\n[att~=val]\nMatch when the element\'s "att" attribute value is a space-separated list of\n"words", one of which is exactly "val". If this selector is used, the words in the \nvalue must not contain spaces (since they are separated by spaces).\n[att|=val]\nMatch when the element\'s "att" attribute value is a hyphen-separated list of\n"words", beginning with "val". The match always starts at the beginning of the\nattribute value. This is primarily intended to allow language subcode matches\n(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).\n</code></pre>\n</blockquote>\n\n<p>However, here is the appropriate, UPDATED way to select all outgoing links using the new <a href="http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/%3anot" rel="noreferrer">CSS3 <strong>:not</strong> pseudo class selector</a> as well as the new <a href="http://www.w3.org/TR/css3-selectors/#attribute-substrings" rel="noreferrer"><strong>*=</strong> substring syntax</a> to make sure it disregards any internal links that may still begin with <strong>http</strong>:</p>\n\n<pre><code>a[href^=http]:not([href*="yourdomain.com"])\n{\n    background: url(external-uri);\n    padding-left: 12px;\n}\n</code></pre>\n\n<p>*Note that this is unsupported by IE, up to at least IE8. Thanks, IE, you\'re the best :P</p>\n'}]
['https://Stackoverflow.com/questions/49368', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1968/']