Jump to content

Possible bug in firefox !?

jonmunm

By jonmunm
in CSS

Recommended Posts

jonmunm Newbie

jonmunm

Posted
Posted

Hi everyone ...This is my first post...You see, I was using the :child-selector in firefox, which is supposed to select the first child of a given tag (no matter the type of the child). I've researched a lot and haven't found any answer. The selector I'm talking about is not this one :first-child pseudo-class.As I know, there are two types of :first-child selector:

  • ul:first-child This selector (with no space) translates to "Get all <ul> tags that are the first child of some other tag"
  • ul :first-child This selector (with space) translate to "Get the first child of an <ul> tag, no matter its type"

Ths first one is the most common of both, and the second one is the one I'am interested about. I was making some test in firefox 3.6.13 and the selector behavior I got was this "Get EVERY tag that is the first child of its parent". Here is the code, which is quite simple to read ... please take the time to check it 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>Resultados de Google !!</title>/* RESET STYLES */html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { 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:''; }/* LAYOUT STYLES */body {	width: 900px;	margin: 10px auto 0 auto;	border: 1px solid #ccc;	padding: 10px;	font: 16px Arial, Helvetica, sans-serif;}ul {	list-style-type: none;	padding: 0;	margin: 0;}/*	SPECIFIC STYLES	*/#resultados > li {	display: block;	width: 600px;	margin-bottom: 2px;	padding: 7px;	border: 1px solid gray;}#resultados :first-child:before {	content: 'Soy primer hijo de mi padre!!';}#opciones :first-child {	font-weight: bold;	text-decoration: none;}#resultados > li ul li:first-child {	font-style: italic;}</style></head><body>	<ul id="resultados">		<li>			<h1><a href="#">Enzabezado</a></h1>			<p><strong>House</strong> M. D. (también conocida como <strong>House</strong> o Dr. <strong>House</strong>) es una serie de televisión estadounidense estrenada en 2004 por la cadena Fox. La serie fue creada por ...</p>			<ul id="opciones">				<li>Opcion 1.1</li>				<li><a href="#">Opcion 1.2</a></li>				<li>Opcion 1.3</li>				<li><a href="#">Opcion 1.4</a></li>			</ul>		</li>	</ul></body></html>

dibujoacp.th.pngUploaded with ImageShack.usI hope you can help me find out wheter it's a firefox's bug ...Bye !!

Link to comment
Share on other sites
Dilated Member

Dilated

Posted
Posted
which is supposed to select the first child of a given tag
I think you mean elements rather than tags. Sorry, I know it s a common mistake, but it bugs me.
ul :first-child This selector (with space) translate to "Get the first child of an <ul> tag, no matter its type"
No, this would translate to "get any element that is a descendant of a ul element as well as the first child of its parent element."The whitespace selector is a descendant selector, not a child selector. The child selector is ">". If you were to use ul > :first-child, it would give you the behavior you expected originally.
Link to comment
Share on other sites
jonmunm Newbie

jonmunm

Posted
  • Author
Posted
No, this would translate to "get any element that is a descendant of a ul element as well as the first child of its parent element."The whitespace selector is a descendant selector, not a child selector. The child selector is ">".If you were to use ul > :first-child, it would give you the behavior you expected originally.
thanks Dilated, you're right. The book I'm studying from mentioned the rule ul :first-child (I didn't see this rule as a descendent one), however, I think it left out the fact the presence of child tags inside <li> tags could raise some unexpected results ...Yo said it's a common mistake to get tags and elements mixed ...Could you tell me the diference, technicly speaking ??Bye !!
Link to comment
Share on other sites
Dilated Member

Dilated

Posted
Posted
Yo said it's a common mistake to get tags and elements mixed ...Could you tell me the diference, technicly speaking ??
Elements exist in the DOM, whereas tags exist in markup and can be used to create elements. A tag can either be an opening tag (<div>) or a closing tag (</div>). Elements don't have to be created in markup with tags however, they can also be dynamically created in the DOM through use of javascript or another script language that may have access to the DOM.<div id="whatever"> <--- thats a (opening) tag</div> <--- thats a (close) tag<div>hello!</div> <--- thats an element created in markup, comprised of an opening and closing tagdocument.createElement('p'); <--- thats an element, created dynamically in the DOMIt's hard to point to something and say "this is an element", because all an element really is, is a collection of properties, an object in the DOM.
Link to comment
Share on other sites

Archived

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

Go to topic listing
×
×
  • Create New...