[css-d] CSS3 Selectors
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
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] CSS3 Selectors
Are you using it for anything mission critical? Personally, I let something like that gracefully degrade. Or, looking at: http://caniuse.com/#search=nth- Seems like contemporary browsers have a handle on that. Sometimes I'll just make sure there's an alternative option (or, it degrades gracefully) for older IEs. I'm not a huge fan of adding polyfills for everything, unless I'm already using them for a good reason. That's my .2 cents. :D __ 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] CSS3 Selectors
So far I've only had to really use the :nth-type selectors for tables, and for
creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
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/
__
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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor pace...@madebypaceaux.com wrote:
So far I've only had to really use the :nth-type selectors for tables, and
for creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.
Here's a typical use case:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.
--
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] CSS3 Selectors
In your exact use case,I've solved the problem by using the adjacent sibling
selector. More than three items and I consider things a little too messy; I'll
revert to JS or helper classes for more than three items:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div + div + div {margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:46 PM, Tom Livingston wrote:
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor pace...@madebypaceaux.com
wrote:
So far I've only had to really use the :nth-type selectors for tables, and
for creating some demos on layouts.
When it comes to tables, I'd created an html table-maker that optionally
generates helper classes.
Outside of tables, I really haven't had projects that required :nth-child
support in older browsers on any other html elements.
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.
Here's a typical use case:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.
--
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/
__
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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:50 PM, Frank Taylor pace...@madebypaceaux.com wrote:
In your exact use case,I've solved the problem by using the adjacent sibling
selector. More than three items and I consider things a little too messy;
I'll revert to JS or helper classes for more than three items:
style
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div + div + div {margin-right:0;}
/style
div class=wrap
div/div
div/div
div/div
/div
I like it. That idea never occurred to me, sadly.
--
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] CSS3 Selectors
Your one and only caveat is IE7: if there are HTML comments between the divs,
then the adjacent sibling selector doesn't work.
In the one case where our CMS was kicking out comments, I reverted to the
non-adjacent selector:
.wrap div ~ div ~ div {margin-right:0;}
Mind you, if you're dealing with a CMS where you have a variable amount of divs
(between 2 and 4)a no-CSS3, no-JS approach becomes massively more difficult
and requires exponentially more whisky (for me, at least).
/email
signature id=paceaux name=Frank M. Taylor twitter=@paceaux /
On Jun 12, 2013, at 3:13 PM, Tom Livingston wrote:
I like it. That idea never occurred to me, sadly.
__
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] css3 selectors
I'm just curious, is there a css3 selector for previous siblings? And if there is, how widely supported is it? It'd be useful for styling paragraphs that come before (introducing) lists for instance. ---Tim Climis Computer Coordinator International Services __ 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] css3 selectors
On Thu, March 26, 2009 1:21 pm, Climis, Tim wrote:
I'm just curious, is there a css3 selector for previous siblings? And if
there is, how widely supported is it?
It'd be useful for styling paragraphs that come before (introducing) lists
for instance.
No, but you could achieve the same thing (for the example you give) using
CSS2.1 adjacent-sibling selectors [1]:
p + ul {
font-style: italic;
}
[1] http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Cheers,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
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] css3 selectors
I'm just curious, is there a css3 selector for previous siblings? And if
there is, how widely supported is it?
---
Yes! There is.
Sintax is:
ul ~ p {...} matches p elements that comes before ul elements.
Firefox, Opera and Safari on windows support it.
IE 7 doesn't support.
Don't know about others.
Maurício
__
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] css3 selectors
Ops! My fault on previous email:
Sintax is:
ul ~ p {...} matches p elements that comes AFTER ul elements.
Maurício
__
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] css3 selectors
you could achieve the same thing (for the example you give) using
CSS2.1 adjacent-sibling selectors [1]:
p + ul {
font-style: italic;
}
From the spec:
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is
the subject of the selector. The selector matches if E1 and E2 share the same
parent in the document tree and E1 immediately precedes E2, ignoring
non-element nodes (such as text nodes and comments).
pThese are the things you need to bring:/p
ul
liBananas/li
liPie/li
/ul
Unless I'm misreading the spec, that would match the ul and make my list text
italicized, which isn't what I want. I want to match the p.
Something like E1 + E2, where E1 is the subject of the selector.
---Tim
__
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] css3 selectors
On Thu, March 26, 2009 2:03 pm, Climis, Tim wrote: Unless I'm misreading the spec, that would match the ul and make my list text italicized, which isn't what I want. I want to match the p. DOH! Yes, I fail - sorry :-( Well, it is lunchtime... -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ 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] css3 selectors
On Mar 26, 2009, at 10:06 AM, Mauricio ((Maujor)) Samy Silva wrote:
I'm just curious, is there a css3 selector for previous siblings?
And if
there is, how widely supported is it?
--
-
Yes! There is.
Sintax is:
ul ~ p {...} matches p elements that comes before ul elements.
I don't believe that this is correct. This would match a p element
that comes AFTER (though not necessarily immediately after) the list
element.
See:
http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
Michael Stewart
bagelstew...@gmail.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] css3 selectors
On Mar 26, 2009, at 10:21 PM, Climis, Tim wrote: I'm just curious, is there a css3 selector for previous siblings? And if there is, how widely supported is it? It'd be useful for styling paragraphs that come before (introducing) lists for instance. Nope, nothing like that exists. http://www.w3.org/TR/css3-selectors/ 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] css3 selectors
Climis, Tim wrote:
pThese are the things you need to bring:/p
ul
liBananas/li
liPie/li
/ul
Unless I'm misreading the spec, that would match the ul and make my list
text italicized, which isn't what I want. I want to match the p.
Something like E1 + E2, where E1 is the subject of the selector.
---Tim
You can only target it indirectly.
p:first-child {...}
p ~ p {...} /* overriding style */
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css3 selectors
Ops! My fault on previous email:
Sintax is:
ul ~ p {...} matches p elements that comes AFTER ul elements.
Yeah, my testing had just discovered that. :( Digging into the spec to see
what was up, it looks like there's not a selector for what I want. Maybe
because it would need a second pass to figure out who's before.
The ~ matches all the p elements after a ul element. The + matches a p
element immediately after a ul element.
Oh well.
__
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] css3 selectors
ul ~ p {...} matches p elements that comes AFTER ul elements.
The ~ matches all the p elements after a ul element. The + matches a p
element immediately after a ul element.
What about doing it backwards then put a class on the p and target the
following ul
__
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] css3 selectors
Climis, Tim wrote:
I'm just curious, is there a css3 selector for previous siblings?
And if there is, how widely supported is it?
It'd be useful for styling paragraphs that come before (introducing)
lists for instance.
None exists, but you could use jQuery to do it:
style type='text/css'
media='screen,projection'
p.p_before_ul
{
font-weight:bold;
}
/style
script type='text/javascript'
src='http://www.google.com/jsapi'/script
script type='text/javascript'
google.load('jquery','1');
google.setOnLoadCallback(function(){
$('ul').prev('p').addClass('p_before_ul');
});
/script
Anyway, hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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] css3 selectors
What about doing it backwards then put a class on the p and target the following ul What I'm going for is to take the bottom margin off of a paragraph preceding a list. I don't need the list to be styled any differently, so there's no reason to target it at all. Here's a list: * Something * Something else Instead of: Here's a list: *something *something else So targeting the ul doesn't make much sense. What I've got now is a list_header class that goes on all the p elements that are really list headers. But I thought it would be cool if I didn't need the class, and could just say any paragraph before a list is a list header instead. __ 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] css3 selectors
You should use h* elements instead of p elements for any kind of header. You might then not need to specify any classes and it's more semantically correct What I'm going for is to take the bottom margin off of a paragraph preceding a list. I don't need the list to be styled any differently, so there's no reason to target it at all. Scott has a valid point here. Maybe this is the way you should be doing it. Also is it possible to make up ones own elements? That's sorta what XML is right? If you could do that then you can style it just like a p or h1 tag. __ 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] css3 selectors
You should use h* elements instead of p elements for any kind of header. You might then not need to specify any classes and it's more semantically correct Sent from my iPhone On Mar 26, 2009, at 9:21 AM, Climis, Tim tcli...@indiana.edu wrote: What about doing it backwards then put a class on the p and target the following ul What I'm going for is to take the bottom margin off of a paragraph preceding a list. I don't need the list to be styled any differently, so there's no reason to target it at all. Here's a list: * Something * Something else Instead of: Here's a list: *something *something else So targeting the ul doesn't make much sense. What I've got now is a list_header class that goes on all the p elements that are really list headers. But I thought it would be cool if I didn't need the class, and could just say any paragraph before a list is a list header instead. __ 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/
Re: [css-d] css3 selectors
Scott has a valid point here. Maybe this is the way you should be doing it. Also is it possible to make up ones own elements? That's sorta what XML is right? If you could do that then you can style it just like a p or h1 tag. He does. And I may do that. I'm not using h6 for anything on this site yet. But there are a few things I wish for that would make even more semantic sense. A. lists contained in paragraphs, or B. a list header element (like thead or th) ullh/lh li/li /ul And with XHTML, I could add my own elements, but then I'd have to write my own doctype or namespace, and it'd probably throw IE into all sorts of fun conniption fits. But I think now that I've written an entire email without any mention of CSS, we're officially off topic, and should close the thread. ---Tim __ 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] css3 selectors
What I'm going for is to take the bottom margin off of a paragraph preceding a list. I don't need the list to be styled any differently, so there's no reason to target it at all. Here's a list: * Something * Something else Instead of: Here's a list: *something *something else So targeting the ul doesn't make much sense. What I've got now is a list_header class that goes on all the p elements that are really list headers. But I thought it would be cool if I didn't need the class, and could just say any paragraph before a list is a list header instead. Wouldn't it be easier to either: - default to have paragraph spacing apply above, not below (padding- top vs padding-bottom) with no top padding on a ul - or if the ul follows a p, give it a negative margin-top +++ colleen sullivan leh __ 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] css3 selectors
Climis, Tim wrote:
What about doing it backwards then put a class on the p and target the
following ul
What I'm going for is to take the bottom margin off of a paragraph preceding
a list. I don't need the list to be styled any differently, so there's no
reason to target it at all.
[...]
Tim,
How about *adding* a negative top margin to the UL? viz:
p + ul { margin-top: -1em; }
Cordially,
David
--
__
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] css3 selectors
How about *adding* a negative top margin to the UL? viz: An interesting idea that I had not thought of. It would work though. ---Tim __ 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] css3 selectors
On 27/03/2009, at 4:26 AM, Climis, Tim wrote: But there are a few things I wish for that would make even more semantic sense. A. lists contained in paragraphs, or B. a list header element (like thead or th) ullh/lh li/li /ul Perhaps a definition list could be styled to achieve what you want? http://www.w3.org/MarkUp/html3/deflists.html You'd probably need to put a bullet in as a css background image as dl does not seem to support list-style-type as ul and ol do, but dl does have an optional list header lh which could be styled ... Cheers, KathyW. __ 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] CSS3 selectors to filter out content style
Someone I know came to me with a problem: he wants his print
stylesheet to not apply a style when a link contains an image.
Here's some sample HTML to explain the problem:
a id=anchor name=anchor/a
pa href=http://flickr.com;img
src=http://flickr.com/foo/picture-ID; //a/p
pHere is an a href=http://example.com;example link/a./p
His CSS puts in generated content:
a[href]:before {
content: [;
color: #000;
text-decoration: none;
}
a[href]:after {
content: attr(href) ] ;
color: #000;
text-decoration: none;
}*/
The generated content appears around the example link AND the linked
image when you print it. He doesn't want it to appear around the
linked image.
I thought that using the :not selector was the solution:
a:not([href*=flickr]):before {
content: [;
color: #000;
text-decoration: none;
}
a:not([href*=flickr]):after {
content: attr(href) ] ;
color: #000;
text-decoration: none;
}
But there are two obvious problems:
1. Anchor links are now getting generated brackets thrown around them
2. If he switches away from Flickr or links to an image on a
non-Flickr, he has to add a new exception every time
I know there's a way in XSLT to test for a child element, but it
doesn't seem like you can do the same in CSS.
Is there a simple, elegant solution I'm missing here?
dw
--
Dylan Wilbanks
Seattle, WA
Wired since 1972. Online since 1992.
http://clientandserver.com || http://seattle.metblogs.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] CSS3 selectors to filter out content style
Dylan Wilbanks wrote:
I thought that using the :not selector was the solution:
a:not([href*=flickr]):before {
content: [;
color: #000;
text-decoration: none;
}
a:not([href*=flickr]):after {
content: attr(href) ] ;
color: #000;
text-decoration: none;
}
But there are two obvious problems:
1. Anchor links are now getting generated brackets thrown around
them
2. If he switches away from Flickr or links to an image on a
non-Flickr, he has to add a new exception every time
I don't have a solution for the second problem, but wouldn't the first
be solved by overriding the earlier styles?
a:([href*=flickr]):before {
content: ;
color: #000;
text-decoration: none;
}
a:([href*=flickr]):after {
content: attr(href) ;
color: #000;
text-decoration: none;
}
--
Els
__
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] CSS3 selectors to filter out content style
On Wed, 28 Jan 2009 11:54:09 -0800, Dylan Wilbanks wrote:
Someone I know came to me with a problem: he wants his print stylesheet to
not apply a
style when a link contains an image.
[sample code stripped]
The generated content appears around the example link AND the linked image
when you
print it. He doesn't want it to appear around the linked image.
I thought that using the :not selector was the solution:
a:not([href*=flickr]):before
{ content: [; color: #000; text-decoration: none; }
a:not([href*=flickr]):after {
content: attr(href) ] ; color: #000; text-decoration: none; }
But there are two obvious problems:
1. Anchor links are now getting generated brackets thrown around them 2. If
he switches
away from Flickr or links to an image on a non-Flickr, he has to add a new
exception
every time
I know there's a way in XSLT to test for a child element, but it doesn't seem
like you
can do the same in CSS.
~~~
Correct. You can't.
Is there a simple, elegant solution I'm missing here?
Simple? Elegant? Depends. If you know any PHP, adding a suitable CLASS
to links around images should solve it.
Cordially,
David
--
__
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/
