Re: [css-d] Flexbox order and first/last elements ...
Le 26 oct. 2013 à 14:42, Micky Hulse mickyhulse.li...@gmail.com a écrit :
When using a flexbox layout, and re-ordering columns (for example)
using the order property, is there a way to target the visible
first/last child?
Everything I try only affects the actual ordering of elements in the
source code, not the ordering that’s set via order.
Directly? I don’t think so - all those (:first-*, :last-*) pseudo-classes
target real elements in the DOM.
But if you know that the e.g. second div in your layout will be moved to be
visibly the first one, you can use the nth-child pseudo-class:
div:nth-child(2) { background: lime }
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] Flexbox order and first/last elements ...
Thanks for the reply/answer/code Philippe! It's much appreciated.
On Fri, Oct 25, 2013 at 11:01 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Directly? I don’t think so - all those (:first-*, :last-*) pseudo-classes
target real elements in the DOM.
Ah, that's good to know. Thanks for the clarification. :)
But if you know that the e.g. second div in your layout will be moved to be
visibly the first one, you can use the nth-child pseudo-class:
div:nth-child(2) { background: lime }
Great! I'll play with that.
Have a nice weekend.
Cheers,
Micky
--
git.io/micky
__
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] Flexbox order and first/last elements ...
I did some searching. A combination of flexbox layout and srcset images
may (eventually) make responsive design a non-issue. But in the meantime
there are browser version and prefixing issues to learn first, before
attempting to use any of it. All of this looks promising (I'm a beginner,
not an expert).
IE 10 supports a prefixed syntax. IE 11 is more standards compliant. But
what about the hoards of legacy XP users? If the developer has to use IE
conditionals and then to write legacy CSS as well as prefixed and not
prefixed flexbox and srcset codes, what's the point? Am I missing
something? How can we get Microsoft to upgrade the old browsers--which
cause so much pain?
Or is there a current benefit--that's worth the effort--of using the new
stuff now?
On Sat, Oct 26, 2013 at 12:07 AM, Micky Hulse mickyhulse.li...@gmail.comwrote:
Thanks for the reply/answer/code Philippe! It's much appreciated.
On Fri, Oct 25, 2013 at 11:01 PM, Philippe Wittenbergh e...@l-c-n.com
wrote:
Directly? I don’t think so - all those (:first-*, :last-*)
pseudo-classes target real elements in the DOM.
Ah, that's good to know. Thanks for the clarification. :)
But if you know that the e.g. second div in your layout will be moved to
be visibly the first one, you can use the nth-child pseudo-class:
div:nth-child(2) { background: lime }
Great! I'll play with that.
Have a nice weekend.
Cheers,
Micky
--
git.io/micky
__
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/
--
/* Colin (Sandy) Pittendrigh --oO0 */
__
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] Flexbox order and first/last elements ...
26 oct 2013 17.01 Colin (Sandy) Pittendrigh: Or is there a current benefit--that's worth the effort--of using the new stuff now? Always embrace the latest browsers and work with that, simply giving older browsers another experience. You can also use poly-fils to some extent while the older browsers die out. This is what I did for IE6 until it all but disappeared from the logs and IE 7 now. __ 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] Flexbox order and first/last elements ...
On 10/26/13, 8:01 AM, Colin (Sandy) Pittendrigh wrote: [...] Or is there a current benefit--that's worth the effort--of using the new stuff now? [...] As a non-expert myself, I'm struggling with the same conflicts. So far, I have found flaws in most current methods of laying out pages. Floats can drop under certain circumstances; inline-blocks have spaces between that can't be reliably adjusted. So flexbox looks like a better solution. There's a limited way in which old and new can be combined, I found. If you use floats or inline blocks as of old, then later add a flex declaration on the container element, the floated/inline-block child elements are treated as flex elements willy-nilly. Again, there are limitations as to what can be done. But I suggest it's worth using some of what's available on modern browsers, considering the old methods are really hacks. Just one hobbyist's opinion. :) -- Cordially, David __ 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/
