4

In the following HTML is it possible to affect "First Text", eg, giving it a margin, or a width, without affecting the second and third elements.

<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
Jamie Kitson
  • 3,973
  • 4
  • 37
  • 50
  • You could wrap it in an element, and apply styles to that – billyonecan Jul 02 '14 at 15:29
  • Probably not without actually wrapping it in a proper HTML text tag. That's why text nodes like that are generally not recommended. – Paulie_D Jul 02 '14 at 15:30
  • No, it's not possible. If you set a width/margin on the #first div, it will affect the #second and #third elements as well since they are children of the div #first. You should wrap the text you want to style in a new container and style that instead. – APAD1 Jul 02 '14 at 15:31
  • 1
    Your only chance is to use `position:absolute` or `relative` and reset the position using `left`, `top` etc. – Eun Jul 02 '14 at 15:32
  • There was a plan to add the `:contains()` selector to the `CSS3`, which would help you to achieve this, but it didn't get implemented so far. – emerson.marini Jul 02 '14 at 15:37
  • If you're happy to go with `jQuery`, check this post: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery – emerson.marini Jul 02 '14 at 15:45

3 Answers3

0

margin and width never have the value inherit by default, but the size of a container is going to influence the rendering of its children (simply because of where word wrapping will occur).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Don't mix up your code with container and content elements. This way you won't be able to do it like you're willing to, like APAD1 said.

Instead, use container elements and for each content element a new child node. That way, you can access single child elements with the first-child selector.

This works for me:

<div id="highlight">
    <div id="first">First Text</div>
    <div id="second">Second Text</div>
    <div id="third">Third Text</div>
</div>

CSS:

div#highlight div:first-child{margin:10px;color:red}

Working example here: http://jsfiddle.net/B5Ej9/

Update: TL;DR: It isn't possible to do so with the given HTML without any ugly hack!

If there is no chance to change the HTML, you will need some kind of hack to workaround, as (like Quentin) answered, all the child objects automatically inherit width and margin from parent objects in DOM. The following example might work for some indentation on the left margin of the div, but I know: It's an ugly workaround that should just clarify what I mean (and why you might consider getting the HTML to be changed). Here you go, with your original HTML:

<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>

And the workaround CSS:

div#first { margin: 20px; color: red; background: grey;}
div#first *:not(:root) { margin-left: -20px; color: blue}

That way, you will add a margin to the first div and inherit it to all the childs (second and third), but everything that is not inside the root will be set to a negative margin on the left. But have a look at the background (http://jsfiddle.net/vag58/), you will notice that the background of all child elements is still inherited and you're never ever gonna change that.

ConcurrentHashMap
  • 4,998
  • 7
  • 44
  • 53
0

If 'second' and 'third' absolutely need to be children of 'first', then you may use an external style sheet for 'first' and inline style for 'second' and 'third'.

Lone Ronin
  • 2,530
  • 1
  • 19
  • 31