[css-d] question about style inheritance
Hi All.
I have a bit of code that, for example, looks like this:
style type=text/css
div { color: blue }
div[dir=rtl] { color: red }
/style
div dir=rtl
hi!
divbye!/div
/div
As I somewhat expected, the outer (hi!) text rendered red, whereas the
inner child is rendering blue. Is there a way I can define my styles
such that div[dir=rtl] and any children (at any level and whose dir
is not explicitly ltr) all match the same style? Alternatively, is
it bad form to not explicitly set the dir attribute on the divs inside
a div whose dir attribute is rtl?
Thanks a lot!
--
Internets. Serious business.
__
css-discuss [EMAIL PROTECTED]
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] question about style inheritance
Josh Ghiloni wrote:
Hi All.
I have a bit of code that, for example, looks like this:
style type=text/css
div { color: blue }
div[dir=rtl] { color: red }
/style
div dir=rtl
hi!
divbye!/div
/div
As I somewhat expected, the outer (hi!) text rendered red, whereas the
inner child is rendering blue. Is there a way I can define my styles
such that div[dir=rtl] and any children (at any level and whose dir
is not explicitly ltr) all match the same style? Alternatively, is
it bad form to not explicitly set the dir attribute on the divs inside
a div whose dir attribute is rtl?
Thanks a lot!
If your question is how can it arrange the styles so that what's inside
of the div with [dir=rtl] will inherit its styles, there are
different approaches to this depending on how your document and CSS
styles are structured.
In the example you gave, if you were to declare div[dir='rtl'] div,
that would mean all divs that are a descendent of a div with the
attribute dir=rtl will have that property. Of course, you could always
use the down and dirty method by using the universal selector, as in
div[dir='rtl'] *, which will apply to all elements descending from
div[dir=rtl] - but it's best to exercise care when using an approach
like this.
You are about to take a big step forward with your skills now that you
are try to grasp one of the most essential concepts in CSS, namely
inheritance and specificity. There are many great resources for study,
and great tools to help you figure out how to target your styles. Start
with
http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ ,
which is a very good article that will help clarify many things.
The deeper your understanding of inheritance, specificity, and the Box
Model, the greater your skills will become. Keep at it!
__
css-discuss [EMAIL PROTECTED]
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] question about style inheritance
Josh Ghiloni wrote:
I have a bit of code that, for example, looks like this:
style type=text/css
div { color: blue }
div[dir=rtl] { color: red }
/style
First of all, I'd like to say that most questions about style
inheritance aren't. In you example, there is no way in which any div
element could inherit a value for the color property. The first rule
makes sure that when this style sheet is used, every div element has the
color property directly assigned to it, and this means that inheritance
is _out_ for it. (_Other_ elements inside a div element may inherit the
color property from it.)
Second, I hope that you know that IE 6 does not support attribute
selectors, and it's probably still the most widely used browser. It
would ignore your second rule and apply the first one. The same applies
even to IE 7 in Quirks Mode.
div dir=rtl
hi!
divbye!/div
/div
As I somewhat expected, the outer (hi!) text rendered red, whereas the
inner child is rendering blue.
On supporting browsers, yes.
Is there a way I can define my styles
such that div[dir=rtl] and any children (at any level and whose dir
is not explicitly ltr) all match the same style?
Do you mean any children by any children? Then you can write
div[dir=rtl], div[dir=rtl] * { color: red }
Or if you mean just div children of a div element that has dir=rtl,
you'd write
div[dir=rtl], div[dir=rtl] div { color: red }
However, these imply that if you have
div dir=rtl
div dir=ltr
...
/div
/div
then the rule would still apply to the inner div, i.e. the dir=rtl
would not prevent the selector from applying to it.
Alternatively, is
it bad form to not explicitly set the dir attribute on the divs inside
a div whose dir attribute is rtl?
I don't quite follow... how would that be bad form? The dir attribute is
by default inherited in the HTML sense, and has dir=ltr as the
default, and it is common practice to omit it altogether unless you have
some right to left text, in which case one normally sets dir=rtl for
the outermost element.
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
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] question about style inheritance
Thank you for your response, Jukka (you too Highpowered!) Both of them
were very helpful. Given that I'm required to support IE 6 (shudder)
among other browsers, it seems the attribute selector method is not
the way to go (I need to remember to test on IE 6 more often -- time
to change some of my existing code!). I suppose I could load an
alternate RTL stylesheet in the situations where I'm supporting RTL
languages.
Thanks again!
On Jan 11, 2008 6:03 PM, Jukka K. Korpela [EMAIL PROTECTED] wrote:
Josh Ghiloni wrote:
I have a bit of code that, for example, looks like this:
style type=text/css
div { color: blue }
div[dir=rtl] { color: red }
/style
First of all, I'd like to say that most questions about style
inheritance aren't. In you example, there is no way in which any div
element could inherit a value for the color property. The first rule
makes sure that when this style sheet is used, every div element has the
color property directly assigned to it, and this means that inheritance
is _out_ for it. (_Other_ elements inside a div element may inherit the
color property from it.)
Second, I hope that you know that IE 6 does not support attribute
selectors, and it's probably still the most widely used browser. It
would ignore your second rule and apply the first one. The same applies
even to IE 7 in Quirks Mode.
div dir=rtl
hi!
divbye!/div
/div
As I somewhat expected, the outer (hi!) text rendered red, whereas the
inner child is rendering blue.
On supporting browsers, yes.
Is there a way I can define my styles
such that div[dir=rtl] and any children (at any level and whose dir
is not explicitly ltr) all match the same style?
Do you mean any children by any children? Then you can write
div[dir=rtl], div[dir=rtl] * { color: red }
Or if you mean just div children of a div element that has dir=rtl,
you'd write
div[dir=rtl], div[dir=rtl] div { color: red }
However, these imply that if you have
div dir=rtl
div dir=ltr
...
/div
/div
then the rule would still apply to the inner div, i.e. the dir=rtl
would not prevent the selector from applying to it.
Alternatively, is
it bad form to not explicitly set the dir attribute on the divs inside
a div whose dir attribute is rtl?
I don't quite follow... how would that be bad form? The dir attribute is
by default inherited in the HTML sense, and has dir=ltr as the
default, and it is common practice to omit it altogether unless you have
some right to left text, in which case one normally sets dir=rtl for
the outermost element.
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
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/
--
Internets. Serious business.
__
css-discuss [EMAIL PROTECTED]
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/
