Is There a CSS Selector for the First Child, Taking Text Nodes into Account

Is there a CSS selector for text nodes?

Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.

Select element inline with text

It seems this is not possible without changing your markup or using JavaScript. I found many questions matching your own, none with solutions.

Is there a CSS selector for the first child, taking text nodes into account?

Only child in CSS with a text sibling

CSS selector for only child, including text

CSS: first-child selector including text nodes

CSS element child vs child with text node

How to use CSS first-child but excluding text content

Check if child is last - also include text nodes

Place the Text node in a element

.icon:last-child {

  color: red;

}

<a href="" class="button">

    <i class="icon">Not last child</i>

    <span>Button</span>

</a><br />

<a href="" class="button">

    <span>Button</span>

    <i class="icon">Last child</i>

</a>

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

---

Related Topics