RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Birendra]

Hi Tee

Please use  tag in your coding. As your css is right but it's not
effected till you didn't mention the parent :)

Example:

Heading 2 this is the first-child and the bg color should be in
Olive.
  Another Heading 2 - this 
  
   This is paragraph and first-child so the bg color should be in Olive
too.
  Another Heading 2 - this 


Let me know is it work or not.

Regards
Birendra

-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of tee
Sent: Sunday, March 06, 2011 3:34 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] why :first-child pseudo-class doesn't work for some
selectors/elements?

http://jsbin.com/apate4/9/

  dt, dd { border-top:1px solid #555;float:left }
  dt:first-child {border-top:0}
dd:first-child {border-top:0}
  h2, p {background:#ddd;padding:15px;margin:5px}
  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared
the two individually as I thought maybe they can't be grouped, but it makes
no differences.

According to the spec, it should work.
The :first-child pseudo-class represents an element that is the first child
of some other element.
http://www.w3.org/TR/css3-selectors/#first-child-pseudo

Assigning a class to the element is of no help.


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Rob Crowther]

On 06/03/11 20:22, tee wrote:

but I can never get h2:first-child works


Here's an example, specifically using h2 elements since you mentioned them:

http://www.boogdesign.com/examples/css3/first-child.html

By default, every element has a blue border, but any element which is a 
:first-child has a red border:


:first-child {
border: 1px solid red;
}

In addition, h2 elements which are children of #content and first-child 
within their parent have white text on a black background:


#content h2:first-child {
color: #fff;
background: #000;
}

Rob


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Thierry Koblentz]

> "The :first-child pseudo-class represents an element that is the first
> child of some other element.".
> 
> I have often used li:first-child or li a:first child in different
> section of a page, why is that I can get the first-child in, say,
> 
> #hdr li:first-child
> .sidebox li:first-child (and it applies to all sidebox sections)
> 
> .sidebox li ol:first-child, #content h2:first-child
> 
> In a typical 2 columns layout,  in content area, there are a number of
> h2 in different sections and there is no first-child declared but h2,
> but I can never get h2:first-child works yet #hdr li:first-child and
> .sidebox li:first-child  work. This is still a bit confusing, is that
> means #hdr li:first-child (which is not wrapped inside #content)
> considers the first child of some other element for the entire page? If
> yes, why is that the ".sidebox li ol:first-child" and ".sidebox
> li:first-child" still work?

Can you style the h2 using #content > h2 {} (to confirm that these headings
*are* children of #content)
If that works then go with: #content > h2:first-child {}

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[tee]

The example below is something I constantly seeing, should have gone testing it 
again making sure my memory is still fresh, but I am a bit lazy right now as I 
haven't had my coffee yet.

"The :first-child pseudo-class represents an element that is the first child of 
some other element.".

I have often used li:first-child or li a:first child in different section of a 
page, why is that I can get the first-child in, say,

#hdr li:first-child
.sidebox li:first-child (and it applies to all sidebox sections)

.sidebox li ol:first-child, #content h2:first-child

In a typical 2 columns layout,  in content area, there are a number of h2 in 
different sections and there is no first-child declared but h2, but I can never 
get h2:first-child works yet #hdr li:first-child and .sidebox li:first-child  
work. This is still a bit confusing, is that means #hdr li:first-child (which 
is not wrapped inside #content) considers the first child of some other element 
for the entire page? If yes, why is that the ".sidebox li ol:first-child" and 
".sidebox li:first-child" still work?



tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Thierry Koblentz]

> > An alternative to get the first dd in a dl:
> >
> > :first-child + dd { ... }
> 
> That would not be a sure thing as this could match a dt too

Scratch that, I didn't have my coffee yet ;)


--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

RE: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Thierry Koblentz]

> An alternative to get the first dd in a dl:
> 
> :first-child + dd { ... }

That would not be a sure thing as this could match a dt too

--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org 






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[tee]

 I see! 

In the entire time I thought this applies to any first child of p, and so are 
for the first h2 and first dd in any give page if first-child is declared.

p:first-child

 The last P before the note.

Note 
The first P inside the note.



How embarrassing!  I'd been using first-child for over a year, probably much 
longer mostly for li, but only recently started using it for heading and dd, 
and  I found it doesn't work.

Thank you!

tee

On Mar 6, 2011, at 2:34 AM, David Dorward wrote:

> Because those elements are not the first child element in their respective 
> containers.
> 
> 
> On 6 Mar 2011, at 10:03, tee wrote:
> 
>> http://jsbin.com/apate4/9/
>> 
>> dt, dd { border-top:1px solid #555;float:left }
>> dt:first-child {border-top:0}
>>   dd:first-child {border-top:0}
> 
>   
>test
>There should be no border top here 
> 
> Since the  is not the first child, a selector using :first-child won't 
> apply.
> 
> 
>> h2, p {background:#ddd;padding:15px;margin:5px}
>> h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
>> two individually as I thought maybe they can't be grouped, but it makes no 
>> differences.
> 
>   
> ... 
>Heading 2 this is the first-child and the bg color 
> should be in Olive. 
> 
> Ditto.
> 
> -- 
> David Dorward
> http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Oliver Boermans]

An alternative to get the first dd in a dl:

:first-child + dd { ... }

I'm not sure how browser support for '+' compares to 'first-of-type'.

Cheers Ollie
--
@ollicle

On 06/03/2011, at 20:33, tee  wrote:

> http://jsbin.com/apate4/9/
> 
>  dt, dd { border-top:1px solid #555;float:left }
>  dt:first-child {border-top:0}
>dd:first-child {border-top:0}
>  h2, p {background:#ddd;padding:15px;margin:5px}
>  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
> two individually as I thought maybe they can't be grouped, but it makes no 
> differences.
> 
> According to the spec, it should work.
> The :first-child pseudo-class represents an element that is the first child 
> of some other element.
> http://www.w3.org/TR/css3-selectors/#first-child-pseudo
> 
> Assigning a class to the element is of no help.
> 
> 
> tee
> 
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***
> 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[David Dorward]

Because those elements are not the first child element in their respective 
containers.


On 6 Mar 2011, at 10:03, tee wrote:

> http://jsbin.com/apate4/9/
> 
>  dt, dd { border-top:1px solid #555;float:left }
>  dt:first-child {border-top:0}
>dd:first-child {border-top:0}

  
   test
   There should be no border top here 

Since the  is not the first child, a selector using :first-child won't 
apply.


>  h2, p {background:#ddd;padding:15px;margin:5px}
>  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
> two individually as I thought maybe they can't be grouped, but it makes no 
> differences.

  
... 
   Heading 2 this is the first-child and the bg color 
should be in Olive. 

Ditto.

-- 
David Dorward
http://dorward.me.uk



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[Susanne Jäger]

Am 06.03.2011 11:03 schrieb tee:

http://jsbin.com/apate4/9/



According to the spec, it should work.
The :first-child pseudo-class represents an element that is the first child of 
some other element.
http://www.w3.org/TR/css3-selectors/#first-child-pseudo


that means first child of any type and doesn't match in your case. Try 
the first-of-type pseudo-class instead:
  but I'm 
not sure which browser-support you get for this one. It works in my 
Seamonkey 2.1 nightly but I didn't check other browsers.


greetings
Susanne


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] why :first-child pseudo-class doesn't work for some selectors/elements?

[tee]

http://jsbin.com/apate4/9/

  dt, dd { border-top:1px solid #555;float:left }
  dt:first-child {border-top:0}
dd:first-child {border-top:0}
  h2, p {background:#ddd;padding:15px;margin:5px}
  h2:first-child,p:first-child  {background:#95B26B} p/s. I tried declared the 
two individually as I thought maybe they can't be grouped, but it makes no 
differences.

According to the spec, it should work.
The :first-child pseudo-class represents an element that is the first child of 
some other element.
http://www.w3.org/TR/css3-selectors/#first-child-pseudo

Assigning a class to the element is of no help.


tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***