Re: [css-d] First-Child
sep 26 2014 23:33 Rick Gordon li...@rickgordon.com:
A useful additional angle on this is that if include some JavaScript to add a
class to body, for example, a class called owner when you are logged in,
then you can have all that debugging stuff only seen by yourself. (WordPress
sites, or other sites where you can be logged in, lend themselves to that
sort of functionality.)
body.owner :first-child { outline: 1px dotted lime; }
At least in Firefox, the Web Developer add-on to Firefox allows for outlining
custom elements. Using :first-child or any other selector gives you
temporarily an outline of the elements you want to identify. These can also be
combined with other built-in element outlines.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] First-Child
Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? And are there any tools that aid in helping you know what is the first child, decedent children for FireFox or Chrome, as a helper tool in the beginning ? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Crest Christopher wrote: Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
The first child of my example, I linked too. Philip Taylor wrote: Crest Christopher wrote: Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
I can't look at the example now, but there are endless examples available, try MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child On Sep 26, 2014 9:40 AM, Crest Christopher crestchristop...@gmail.com wrote: The first child of my example, I linked too. Philip Taylor wrote: Crest Christopher wrote: Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
I looked at examples online. Everyone writes HTML slightly differently, examples help to understand, but there is nothing better then, IMO breaking down your own mark-up. Why I presented an example ! Chris Rockwell wrote: I can't look at the example now, but there are endless examples available, try MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child On Sep 26, 2014 9:40 AM, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: The first child of my example, I linked too. Philip Taylor wrote: Crest Christopher wrote: Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org mailto:css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org http://evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Le 26 sept. 2014 à 22:36, Crest Christopher crestchristop...@gmail.com a
écrit :
Hi, I've been understanding the pseudo-class elements, I like their
functionality. I have a question, here is an code example
http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ?
div#t3 is the first-child of body
p.rt is the first-child of div#t3
Very quick debug tip:
:first-child { outline: 1px dotted lime; }
And are there any tools that aid in helping you know what is the first child,
decedent children for FireFox or Chrome, as a helper tool in the beginning ?
Developer tools for each browser ?
Spec ?
http://www.w3.org/TR/css3-selectors/#first-child-pseudo
MDN usually has decent explanation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Crest Christopher wrote: The first child of my example which I linked to ! Philip Taylor wrote: Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Sorry, Christopher, not interested in playing guessing games. What you have linked to is a web page that displays some on-screen text preceded by the word Results; there is zero evidence of which element you are discussing when asking about its first child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
::First-child of the body, not of the div#t3, news to me. You can't
have ::first-child of the div#t3, it is always of the body ?
::first-child {outline dotted lime;} didn't display ?
Philippe Wittenbergh wrote:
Le 26 sept. 2014 à 22:36, Crest Christophercrestchristop...@gmail.com a
écrit :
Hi, I've been understanding the pseudo-class elements, I like their functionality. I
have a question, here is an code
examplehttp://jsfiddle.net/bpL490pn/embedded/result/, which is the
first-child ?
div#t3 is the first-child of body
p.rt is the first-child of div#t3
Very quick debug tip:
:first-child { outline: 1px dotted lime; }
And are there any tools that aid in helping you know what is the first child,
decedent children for FireFox or Chrome, as a helper tool in the beginning ?
Developer tools for each browser ?
Spec ?
http://www.w3.org/TR/css3-selectors/#first-child-pseudo
MDN usually has decent explanation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Here http://jsfiddle.net/bpL490pn/1/. Philip Taylor wrote: Crest Christopher wrote: The first child of my example which I linked to ! Philip Taylor wrote: Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Sorry, Christopher, not interested in playing guessing games. What you have linked to is a web page that displays some on-screen text preceded by the word Results; there is zero evidence of which element you are discussing when asking about its first child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
There's a simple syntax error in your jsfiddle. Just change the double-colon (::) to a single colon (:) and I think you will get the result you were expecting. On 26 Sep 2014, at 16:05, Crest Christopher crestchristop...@gmail.com wrote: Here http://jsfiddle.net/bpL490pn/1/. Philip Taylor wrote: Crest Christopher wrote: The first child of my example which I linked to ! Philip Taylor wrote: Which is the first child of /what/ ? It is necessary to select an element before it is possible to meaningfully use the term first-child. Sorry, Christopher, not interested in playing guessing games. What you have linked to is a web page that displays some on-screen text preceded by the word Results; there is zero evidence of which element you are discussing when asking about its first child. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Like Philip asked, first child of what?
ul
li/li -- first-child of UL
li/li
/ul
div
p/p -- first-child of div
p/p
/div
aside
header/header -- first-child of aside
div/div
aside
etc.
On Fri, Sep 26, 2014 at 10:04 AM, Crest Christopher
crestchristop...@gmail.com wrote:
::First-child of the body, not of the div#t3, news to me. You can't have
::first-child of the div#t3, it is always of the body ?
::first-child {outline dotted lime;} didn't display ?
Philippe Wittenbergh wrote:
Le 26 sept. 2014 à 22:36, Crest Christophercrestchristop...@gmail.com a
écrit :
Hi, I've been understanding the pseudo-class elements, I like their
functionality. I have a question, here is an code
examplehttp://jsfiddle.net/bpL490pn/embedded/result/, which is the
first-child ?
div#t3 is the first-child of body
p.rt is the first-child of div#t3
Very quick debug tip:
:first-child { outline: 1px dotted lime; }
And are there any tools that aid in helping you know what is the first
child, decedent children for FireFox or Chrome, as a helper tool in the
beginning ?
Developer tools for each browser ?
Spec ?
http://www.w3.org/TR/css3-selectors/#first-child-pseudo
MDN usually has decent explanation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Crest Christopher wrote:
Here http://jsfiddle.net/bpL490pn/1/.
Right, so I see two intended first-child rules there :
::first-child {ouline:1px dotted lime;}
#t3 p::first-child{color:red;}
The first appears to be generic and targets all elements that are first
children of their parents; the second targets the first child p
element that appears nested within an element whose ID is t3, which in
your code is the parent div. Eliminating the syntax errors
(mis-spelled outline, two colons where one is required) yields this :
http://web-consultants.org/tests/First-child.html
which appears to demonstrate what you want.
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Is there a time to use two colons and is there a time to use one colon ?
Philip Taylor wrote:
Crest Christopher wrote:
Herehttp://jsfiddle.net/bpL490pn/1/.
Right, so I see two intended first-child rules there :
::first-child {ouline:1px dotted lime;}
#t3 p::first-child{color:red;}
The first appears to be generic and targets all elements that are first
children of their parents; the second targets the first childp
element that appears nested within an element whose ID is t3, which in
your code is the parentdiv. Eliminating the syntax errors
(mis-spelled outline, two colons where one is required) yields this :
http://web-consultants.org/tests/First-child.html
which appears to demonstrate what you want.
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Two colons are for pseudo elements. One colon is for pseudo classes.
However, I believe that one colon always works because there wasn't a
distinction until CSS3.
::first-letter
::first-line
::before
::after
:link
:visited
:hover
:active
:focus
:first-child
:lang
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Friday, September 26, 2014 12:04 PM
To: Philip Taylor
Cc: CSS Discuss
Subject: Re: [css-d] First-Child
Is there a time to use two colons and is there a time to use one colon ?
Philip Taylor wrote:
Crest Christopher wrote:
Herehttp://jsfiddle.net/bpL490pn/1/.
Right, so I see two intended first-child rules there :
::first-child {ouline:1px dotted lime;}
#t3 p::first-child{color:red;}
The first appears to be generic and targets all elements that are
first children of their parents; the second targets the first childp
element that appears nested within an element whose ID is t3, which
in your code is the parentdiv. Eliminating the syntax errors
(mis-spelled outline, two colons where one is required) yields this :
http://web-consultants.org/tests/First-child.html
which appears to demonstrate what you want.
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 On 09/26/2014 06:27 PM, Tim Climis wrote: Two colons are for pseudo elements. One colon is for pseudo classes. However, I believe that one colon always works because there wasn't a distinction until CSS3. For the record, this only applies to the pseudo-elements that existed in CSS2.1, i.e. ::before, ::after, ::first-line, and ::first-letter [1]. HTH Ms2ger [1] http://dev.w3.org/csswg/css2/selector.html#pseudo-element-selectors -BEGIN PGP SIGNATURE- iQEcBAEBAgAGBQJUJZo4AAoJEOXgvIL+s8n2KOAH/3MQsDIoYutPNTEHqU2YHcMG kRkdRjam9/GfPZUEt3s3zW3Dor60o74ggrCmTBy0Jfo/4ZVhyYWVnWE7UWSNXN3R I5W0UzOHiuHAPVbESsxMvqdbuVnjPtxapctMKNLuti+eHC+1wJZoZ6k9UexJ1Vgq FHdH6a/+RRJdKhkJy6aSjZO47cXwelxVHq6OlI9LHmakltVlX2qxaHe5++N+ftnv hBjoW4U4KuS1bq9nemdRwKWbjsmPVwbuNecqDIQdrulKQ4LQHhn62XQPzEGakRVY tCDVcwGHQdhOTM7U8YkHtUeL3TbCeezWqf34cYf0gyB6em2tNwyhz+St+nYEoLo= =4qsF -END PGP SIGNATURE- __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
sep 26 2014 15:36 Crest Christopher crestchristop...@gmail.com: Hi, I've been understanding the pseudo-class elements, I like their functionality. I have a question, here is an code example http://jsfiddle.net/bpL490pn/embedded/result/, which is the first-child ? And are there any tools that aid in helping you know what is the first child, decedent children for FireFox or Chrome, as a helper tool in the beginning ? use p:first-child” as a selector and that will be obvious. Children elements have parents. The source order decides what is first. At least I’ve never encountered anything different from that. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
sep 26 2014 15:36 Crest Christopher crestchristop...@gmail.com: And are there any tools that aid in helping you know what is the first child, decedent children for FireFox or Chrome, as a helper tool in the beginning ? I don’t know any that can do that specifically, but I’d imagine a javascript plugin could yield info like that. But if you read the source code then that should be all you need. There are plugins that prettify source code making it easier to analyze fast. If you’re not running the Web Developer Extension both in Chrome and Firefox ( Opera) you should try it. It can be very helpful. The built-in developer tools are very very good in Firefox IMHO. Less so in Chrome I think. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
Beautiful solution!
Best,
Karl
Sent from losPhone
On Sep 26, 2014, at 9:00 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Very quick debug tip:
:first-child { outline: 1px dotted lime; }
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First-Child
A useful additional angle on this is that if include some JavaScript to
add a class to body, for example, a class called owner when you are
logged in, then you can have all that debugging stuff only seen by
yourself. (WordPress sites, or other sites where you can be logged in,
lend themselves to that sort of functionality.)
body.owner :first-child { outline: 1px dotted lime; }
Rick Gordon
-
On 9/26/14 7:00 AM, Philippe Wittenbergh wrote:
Very quick debug tip: :first-child { outline: 1px dotted lime; }
And are there any tools that aid in helping you know what is the first child,
decedent children for FireFox or Chrome, as a helper tool in the beginning ?
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class on a class-level
On Dec 5, 2010, at 11:18 PM, Philippe Wittenbergh wrote:
On Dec 6, 2010, at 12:59 PM, Dave Solko wrote:
I'm trying to apply :first-child to an element with a class. It
only needs to work in safari (intranet). I'm using Joomla, so
changing the html isn't really an option. Can it be done?
I've been trying variations on:
.leading:first-child {
border-top: 1px solid #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
code
...
div class=content
div class=description
h1resources/h1
/div
div class=leading
h1foo/h1
plorem ipsum dolor sit amet.../p
/div
div class=leading
h1bar/h1
plorem ipsum dolor sit amet.../p
/div
/div
In your case, the div with class .leading is definitely not the
first-child (it is the second, third, ... child of div.content).
And remember: those structural pseudo-classes count *elements*, then
checks if they have a class, etc.
Given the document structure above, maybe .description + .leading
{ background: red } ?
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
Then perhaps I should rephrase the question. Is there any way, given
the existing HTML to address the first div class=leading
independently of the others? (in reality, there's 4 'leadings')
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class on a class-level
On Dec 7, 2010, at 2:48 AM, Dave Solko wrote:
Given the document structure above, maybe .description + .leading {
background: red } ?
Then perhaps I should rephrase the question. Is there any way, given the
existing HTML to address the first div class=leading independently of the
others? (in reality, there's 4 'leadings')
Does my suggestion above not work for you ?
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first-child pseudo-class on a class-level
I'm trying to apply :first-child to an element with a class. It only
needs to work in safari (intranet). I'm using Joomla, so changing the
html isn't really an option. Can it be done?
I've been trying variations on:
.leading:first-child {
border-top: 1px solid #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
code
...
div class=content
div class=description
h1resources/h1
/div
div class=leading
h1foo/h1
plorem ipsum dolor sit amet.../p
/div
div class=leading
h1bar/h1
plorem ipsum dolor sit amet.../p
/div
/div
...
/code
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class on a class-level
On Dec 6, 2010, at 12:59 PM, Dave Solko wrote:
I'm trying to apply :first-child to an element with a class. It only needs to
work in safari (intranet). I'm using Joomla, so changing the html isn't
really an option. Can it be done?
I've been trying variations on:
.leading:first-child {
border-top: 1px solid #ccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
code
...
div class=content
div class=description
h1resources/h1
/div
div class=leading
h1foo/h1
plorem ipsum dolor sit amet.../p
/div
div class=leading
h1bar/h1
plorem ipsum dolor sit amet.../p
/div
/div
In your case, the div with class .leading is definitely not the first-child
(it is the second, third, ... child of div.content).
And remember: those structural pseudo-classes count *elements*, then checks if
they have a class, etc.
Given the document structure above, maybe .description + .leading { background:
red } ?
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child and + selector issues
Thanks Tim, you were right,. I suspected it was the doctype. I tried it
in the Dev toolbar and it worked fine. I'll get that fixed.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Snadden
Sent: Wednesday, August 12, 2009 8:07 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] first-child and + selector issues
On 13/08/2009, at 9:24 AM, Vincent Pollard wrote:
I'm having a lot of trouble getting a couple of lines of css to work
in
IE8.
It works in Firefox but not IE8. Any ideas why? Is it the doctype? IE8
bug? Some error I've overlooked?
Here's the site: http://tinyurl.com/lo468u http://tinyurl.com/lo468u
Here's the css for this:
..boxes:first-child {
margin-left: 0; /* removes the left-margin from the
first orange box at the bottom of the page
div.colL img + .newsItem {
border: none; /* removes the border from the first
news
item, on the right of the loudhailer image */
}
The reason is that the document is being rendered in quirks mode. The
doctype in this document is actually a comment. Use the IE developer
tools (F12) and look. It says Browser Mode: IE8, Document Mode: Quirks
mode. You can force it into standards mode by changing the document
mode in the developer tools, but you will eventually need to get the
doctype fixed.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first-child and + selector issues
I'm having a lot of trouble getting a couple of lines of css to work in
IE8.
It works in Firefox but not IE8. Any ideas why? Is it the doctype? IE8
bug? Some error I've overlooked?
Here's the site: http://tinyurl.com/lo468u http://tinyurl.com/lo468u
Here's the css for this:
..boxes:first-child {
margin-left: 0; /* removes the left-margin from the
first orange box at the bottom of the page */
}
div.colL img + .newsItem {
border: none; /* removes the border from the first news
item, on the right of the loudhailer image */
}
I know there are lots of validation errors with the XHTML -
unfortunately I have no access to the code right now but I'm working on
it! The css does validate.
Regards,
Vince
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child and + selector issues
On 13/08/2009, at 9:24 AM, Vincent Pollard wrote:
I'm having a lot of trouble getting a couple of lines of css to work
in
IE8.
It works in Firefox but not IE8. Any ideas why? Is it the doctype? IE8
bug? Some error I've overlooked?
Here's the site: http://tinyurl.com/lo468u http://tinyurl.com/lo468u
Here's the css for this:
..boxes:first-child {
margin-left: 0; /* removes the left-margin from the
first orange box at the bottom of the page
div.colL img + .newsItem {
border: none; /* removes the border from the first
news
item, on the right of the loudhailer image */
}
The reason is that the document is being rendered in quirks mode. The
doctype in this document is actually a comment. Use the IE developer
tools (F12) and look. It says Browser Mode: IE8, Document Mode: Quirks
mode. You can force it into standards mode by changing the document
mode in the developer tools, but you will eventually need to get the
doctype fixed.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
You are way over my head, Rob. But given what you state is a
given case, then the solution may well lie within a problem
solving language-- programming?
Hi David,
Actually, if you see my other reply (to Tim Snadden). The way I had
structured the selector was incorrect.
The selector of...
div#sidebar:first-child * {margin-top: 0;}
...would NEVER work, because it is seleting the div#sidebar that is the
first-child of it's parent element. What I needed was...
div#sidebar *:first-child {margin-top: 0;}
...for it to work.
I had misread an explanation of the implementation on one of the popular CSS
sites (can't remember which one now). When I saw Tim's message and then
looked at the specification
(http://www.w3.org/TR/CSS2/selector.html#first-child), I realized my error.
Thanks!
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] first-child pseudo-class not behaving as expected
Hi all,
I am trying to use the first-child pseudo-class to set a zero top margin in
several content divs on a page. The page works in IE7, but not FF3 -- kind
of the opposite of what I would expect. In FF3 the sidebar has a single p
element in it, and a style of...
div#sidebar:first-child *
{margin-top: 0;}
But it does not work in FF3. Why? I've tried using specific elements rather
than the universal selector, with no difference. When I look at the code
using Firebug in Firefox it does not even show the pseudo-class on the
sidebar div (however it does show it with the content div).
The XTHML and CSS validate, and I've checked through it for typos and
errors. Can't find a thing. I've also begun to wonder if there is something
overriding the first-child declaration in the cascade.
Link to problem page:
http://new.pasadenabusinessassociation.com
Any suggestions?
Best regards,
Rob
Rob Emenecker @ Hairy Dog Digital
410.694.3575 (arf) || 410.694.3550 (fax)
www.hairydogdigital.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
Rob Emenecker wrote:
Hi all,
I am trying to use the first-child pseudo-class to set a zero top margin in
several content divs on a page.
div#sidebar:first-child *
{margin-top: 0;}
http://new.pasadenabusinessassociation.com
Any suggestions?
/*div#content:first-child * { margin-top: 0; } delete ruleset*/
/*div#sidebar:first-child * { margin-top: 0; }delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px 0;}/*add ruleset*/
Rob
~d
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
/*div#content:first-child * { margin-top: 0; } delete
ruleset*/
/*div#sidebar:first-child * { margin-top: 0;
}delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px
0;}/*add ruleset*/
David,
That works in the one example, but the purpose of me setting these the way I
did was so that ANY element that was the FIRST element in either of those
DIVs would have a margin-top value of 0 pixels. It's a heck of a lot less
coding that doing a universal reset on all possible elements, and then
having to make all vertical margin adjustments using only the bottom one.
Also, this will be destined for a user-maintainable CMS setup. So while I
could always create a first-element class that has a margin-top value of
0, I have no guarantee that the end-user content editor will remember to
apply that class the first element --OR-- remove it if a previous
first-element now falls lower into the content.
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
Thanks Tim,
div#sidebar p:first-child { margin-top: 0; }
Somehow, somewhere I misread the an explanation of the specification and got
the placement of the [:first-child] pseudo-element incorrect.
The following does work in IE7+ and FF3:
div#sidebar *:first-child {margin-top: 0;}
div#content *:first-child (margin-top: 0;}
I realize bets are off with IE6, however, with standards-compliant sites, I
basically take a horseshoes and hand grenades approach with IE6. So the
margin-top value in the case of IE6 will be acceptable.
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
Rob Emenecker wrote:
/*div#content:first-child * { margin-top: 0; } delete
ruleset*/
/*div#sidebar:first-child * { margin-top: 0;
}delete ruleset*/
p {border: 1px solid red;margin: 0 0 15px
0;}/*add ruleset*/
David,
That works in the one example, but the purpose of me setting these the way I
did was so that ANY element that was the FIRST element in either of those
DIVs would have a margin-top value of 0 pixels. It's a heck of a lot less
coding that doing a universal reset on all possible elements, and then
having to make all vertical margin adjustments using only the bottom one.
Also, this will be destined for a user-maintainable CMS setup. So while I
could always create a first-element class that has a margin-top value of
0, I have no guarantee that the end-user content editor will remember to
apply that class the first element --OR-- remove it if a previous
first-element now falls lower into the content.
...Rob
You are way over my head, Rob. But given what you state is a given case,
then the solution may well lie within a problem solving language--
programming?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
