Styling Pseudo Classes with the RGBA CSS3 Property

Therefore, if you’re interested in learning how to put this handy property to work for you, this article series might the material that you’re looking for. In its four tutorials you’ll find a decent variety of code samples that will show you how to use the property to individually control the transparency of different sections of a web page element, including its inner text, background and borders.

And now that you've been introduced to the series’ main goal, it’s time to review the topics that were discussed in its previous (penultimate) part. In that tutorial I explained how to utilize the “rgba” property to modify the overall opacity of all of the H2 elements coded in a sample (X)HTML document. This task was accomplished by coupling the pertinent property at the same time to the “background,” “color” and “border” declarations of the selected elements. This process was very simple to follow.

It’s valid to point out, though, that the use of the “rgba” property isn’t limited to styling CSS selectors in its normal state. It's possible to utilize it for defining the visual presentation of pseudo classes with the same ease. To demonstrate how to achieve this in a few simple steps, in this last installment of the series I’m going to create a basic example that will show how to use the property for altering the opacity of some divs in their “hover” state.

Ready to tackle the last chapter of this series on the “rgba” property? Then begin reading right now!