pseudo-class selectors

Explanation: This CSS selector (pseudo-class) allows you to style elements which match a given condition. You may already be familiar with a:hover and similar. These have been expanded to include: enabled (default), disabled, and checked. In the working example (modified from a lynda.com tutorial), I also employ some JavaScript to enable or disable an input field.

Typical elements styled with pseudo-element selectors include: button, fieldset, input, optgroup, option, select, and textarea. There are other form elements which can be styled, but the above are the most commonly encountered.

Example CSS code:

/* CSS-3 specific styles*/
input:disabled {
background-color: #e0e0e0;
}

input:disabled + label {
color: #c0c0c0;
}

input:checked + label {
background: #09C;
}

Examine the linked document below and identify why certain rules apply.

Example page (view the source code): http://learning-html5.info/CSS3/CSS3_PseudoElementSelector.html (should work in most modern browsers). For those examining these pages, modern browsers include Internet Explorer 9+ (not earlier versions).

A little more information than you probably want. There is also a negation (:not) pseudo-class selector. You identify what you would like to not target on a given page. General syntax is selector:not(argument)[:(argument)] – note that you can chain these together for rather complex rules.

Consider this example:

div:not(.headline) {
font-weight:normal;
}

In the above example, any class which is not a headline class within a division would be targeted by the above declaration (and would have a font-weight of normal). You should be aware these capabilities exist. However, I have never been a fan of not logic (it often gets too complicated for my simple mind).

Lastly, there are also target selectors. Consider that you have a list of job opportunities or frequently asked questions. One often wants to navigate to a specific item in the list (and then return to the top). One can now style the area one is visiting.

div:target h2 {
padding-left: 40px;
font-size: 1.3em;
color:#CB7D20;
background-color:#2c566a;
}

A working example of target pseudo-class selectors – http://learning-html5.info/CSS3/CSS3_TargetSelector.html (will open in a new browser window). Don’t forget to view the source code. also, scroll up and down the document before clicking on any of the links (then click on a link and observe the effect). Now you know exactly where you are in a document.

References:

  • lynda.com tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *