Jump to content

About :first-line seudo element' specificity


jonmunm

Recommended Posts

Hi ...I was doing some test using Firebug 1.6.1 on Firefox 3.6.13 and I realized tha the specificity of this seudo element is not the same as a tag selector, as said at http://www.w3.org/TR/CSS21/cascade.html#specificity. I've trying to figure out its exact specificity, and I found that it's even higher than inline styles.I hope you can help me to get an accurate conclusion ...Here is some example code wich I've been working on (Tip: I realized that no matter the color of the paragraph is, the :first-line seudo element always win out):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Documento sin título</title><link href="reset.css" type="text/css" rel="stylesheet" /><style type="text/css">#parrafo {	color: blue;}:first-line {	color: red;}</style></head><body>	<p id="parrafo" style="color: yellow;">	Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis   suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis   autem vel eum iure reprehenderit qui in ea voluptate velit esse quam   nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo   voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum   exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea   commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea   voluptate velit esse quam nihil molestiae consequatur, vel illum qui   dolorem eum fugiat quo voluptas nulla pariatur?	</p></body></html>

The reset.css file is:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote, input { padding: 0; margin: 0; font-size: 100%; font-weight: normal;}table { border-collapse: collapse; border-spacing: 0; }td, th, caption { font-weight: normal; text-align: left; }img, fieldset { border: 0; }ol { padding-left: 1.4em; list-style: decimal; }ul { padding-left: 1.4em; list-style:square; }q:before, q:after { content:''; }

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...