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 deal
On Wed, Jun 12, 2013 at 4:50 PM, Frank Taylor 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:
>
>
>>
>> .wrap div{
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:
>
> .wrap div{width: 32%;margin-right:2%;float:left}
> .wrap div + div + div {
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor 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,
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
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
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 |
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)
Perhaps a definition list could be styled to achieve what you want?
http:/
> 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-
Climis, Tim wrote:
>> What about doing it backwards then put a class on the and target the
>> following
>
> 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.
>
> 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
> *some
> 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 thi
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" wrote:
>> What about doing it backwards then put a class on the and
>
> 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
>> di
> What about doing it backwards then put a class on the and target the
> following
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
* S
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:
p.p_before_ul
{
>>> 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 and target the
following
> 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
Climis, Tim wrote:
> These are the things you need to bring:
>
> Bananas
> Pie
>
>
> Unless I'm misreading the spec, that would match the and make my list
> text italicized, which isn't what I want. I want to match the .
>
> Something like E1 + E2, where E1 is the subject of the selecto
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.
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?
> --
> ---
On Thu, March 26, 2009 2:03 pm, Climis, Tim wrote:
> Unless I'm misreading the spec, that would match the and make my list
> text italicized, which isn't what I want. I want to match the .
>
DOH! Yes, I fail - sorry :-(
Well, it is lunchtime...
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
> 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 matche
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
> 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
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
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
___
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
> whe
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:
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:
http://flickr.com";>http://flickr.com/foo/picture-ID"; />
Here is an http://example.com";>example link.
His CSS puts in gen
30 matches
Mail list logo
