Pseudo-Pseudo Classes

If you need a common chunk of text added before content you can use Pseudo selectors to accomplish this. An example is adding a chunk of text to the front of all blockquote elements in your HTML defining the quote as belonging to a specific category.

blockquote:before { content: "Classical"; }

Or you can use pseudo selectors to add check marks to the front of all links which have been visited by the user.

a:visited { padding: 20px; background: transparent url(/images/check.png) no-repeat top left;

Here are some others you might find useful:

a:before { content:"click here"; }
a:after { content:"click here"; }
p:first-letter { font-size:20px; }

These only work in newer more advanced browsers ( down with IE6 )

a[title] { color:red; } this is how you select a tag using one of its attributes as a qualifier. In other words this selector will only apply the color red to links that have a title.

a[title=special] { color:green; } this one applies the color green to all links which have a title and that title equals “special”.

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s