This selector will style any link with a href attribute starting with \u2018http\u2019. This can be useful for styling external links to make it clear that users are being redirected away from your website, or for doing fancy things like adding a padlock icon to any links that point to secure pages (in this case replace the \u2018http\u2019 with \u2018https\u2019). Of course, you can change the string to whatever you want.<\/p>\n
Example:<\/p>\n
Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n The tilda(~) selector will select any element that is preceeded by the first element. This example will select any paragraph that is preceeded by a h1 tag. This could be useful if you wanted to indent paragraphs that are underneath a heading.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n If you haven\u2019t guessed already this selector will target the first line or first letter of any paragraph. You can use this on any element but using it with paragraphs is the most common.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE6+, Opera, Safari<\/p>\n The attributes selector will only target the elements with the specified attribute. This example will add a border to any images that have an alt attribute. You could use this to manipulate images that have a title or alt attribute in order to display a caption, for example.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n This CSS selector actually modifies the content of the page, not just the styling. You can insert content around the selected element using these selectors. In the following example the text \u201cError:\u201d will be inserted before every paragraph with a class of \u2018error\u2019.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE8+, Opera, Safari<\/p>\n This can look quite confusing, but all the above does is look for an attribute (xyz) on the selected element and take a space separated list of values, each of which can be styled differently.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n This selector allows you to add styling to an element whose attribute value contains the supplied string. Possible uses could be to add a little \u2018G\u2019 icon to links pointing to any google page.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n The adjacent select0r will select the first element that is immeadiately preceded by the former element. This is similar to number 2, but this selector is restricted to the first element only, whereas h2 ~ p would select all paragraphs preceded by a h2. The example below would the first paragraph that follows a h2 bold.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n This selector searches the href attribute of a link and targets those that end with .jpg. Nice if you want to style image links or pdf links differently.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n This selector is great for removing margins and borders from the first or last element within a specified parent, in this case the unordered list.<\/p>\n Example:<\/p>\n Compatible with Chrome, Firefox, IE7+, Opera, Safari<\/p>\n","protected":false},"excerpt":{"rendered":" 1. a[href^=”http”] This selector will style any link with a href attribute starting with \u2018http\u2019. This can be useful for styling external links to make it clear that users are being redirected away from your website, or for doing fancy.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[],"class_list":["post-139","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\na[href^=\"http\"] {
\nbackground:url(images\/new-window.png) no-repeat;
\npadding-right:30px;
\n}<\/code><\/p>\n2. h1 ~ p<\/h3>\n
h1 ~ p {
\ntext-indent:20px;
\n}<\/code><\/p>\n3. p:first-line \/ p:first-letter<\/h3>\n
p:first-line {
\nfont-weight:bold;
\n}
\np.fancy:first-letter {
\nfont-size:1.8em;
\nfont-weight:bold;
\ncolor:#333;
\n}<\/code><\/p>\n4. img[alt]<\/h3>\n
img[alt] {
\nborder:1px solid #000;
\n}<\/code><\/p>\n5. :before \/ :after<\/h3>\n
p.error:before {
\ncontent: \"Error:\";
\n}<\/code><\/p>\n6. a[xyz~=”abc def”]<\/h3>\n
a[my-attribute~=\"category\"] {
\nfont-weight:bold;
\n}
\na[my-attribute~=\"product\"] {
\ncolor:#cc0000;
\n}<\/code><\/p>\n7. a[href*=”roundedworks”]<\/h3>\n
a[href*=\"google\"] {
\nbackground:url(images\/google-logo-icon.png) no-repeat;
\npadding-right:30px;
\n}<\/code><\/p>\n8. h2 + p<\/h3>\n
h2 + p {
\nfont-weight:bold;
\n}<\/code><\/p>\n9. a[href$=”.jpg”]<\/h3>\n
a[href$=\".jpg\"] {
\nborder:1px solid #e6e7e8;
\n}<\/code><\/p>\n10. ul:first-child\/ul:last-child<\/h3>\n
ul:last-child {
\nborder-bottom:0;
\nmargin-bottom:0;
\n}<\/code><\/p>\n