how to define style for a group of child elements from parent element's style?


Tags: html,css,styles

Problem :

How can I define the style attribute values for a group of child elements from the parent element's style.

I want to achieve the following-

<div style="style for the child <span> tags">
 <span>a</span>
 <div>b</div>
 <span>c</span>
 <div>d</div>
</div>

Say I want to set the color of the text only in the child <span> tags but not for the text in the child <div> tags. Here I want to know how to do it in case of both inline and internal CSS.

How can I do it?



Solution :

You can't do it inline.

Give your main div an id, let's use container. The css would be like this:

div#container span {
    styles for the spans inside the main div
}

Of course, if you have more than one such container div, use class instead of id. The approach is the same.


    CSS Howto..

    How to force style formatting into child tags of

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    How to apply CSS style for the current page link

    How to access an element's class value via CSS

    How to keep floating labels floating after input. Pure CSS

    How to adjust a div to not move when other sibling is faded out

    How to Convert RGB to HEX ( for Gradients )

    Using jquery to swap text, how to revert other text to original?

    how to css absolute positioning right way

    How to get table-row css and border property work together?

    how can you have layers see through each other on a web page

    How to insert spaces/tabs in text using HTML/CSS?

    how to change browsers default scrollbar using css or jquery

    How to separate html header and content with css and make the content scrollable

    How to set overflow content to go underneath instead of fitting in one row

    How can I set the width of something in jquery based on variables?

    How to override background-color for all classes using css?

    How to center post title in blogger. (tried applying CSS)

    How do I toggle CSS with jQuery?

    How to make children auto fit parent's width only with CSS?

    How do I target only elements that are followed by another (specific) element?

    How to build a complex table by using CSS?

    How to change a Pseudo-class style through JavaScript?

    image carousel showing all images

    How do I change image A when hovering over image B without JavaScript only CSS

    How to disable correctly CSS3 transition property when needed

    How to load self hosted font files if the GoogleFont service is unavailable?

    How can I cut long text according to available div area size?

    How can I center the column vertically in bootstrap mobile mode?

    How to align content of a div to the bottom?