Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector: how to select non-element sibling node?

According to the specification here: http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

So how can we select the non-element sibling node. For example: in the following html, how can we select the "Non-element text" text?

<div><label>Some text here</label> Non-element text</div>
like image 204
N. Q. P Avatar asked Nov 20 '12 05:11

N. Q. P


People also ask

How do I select a specific sibling in CSS?

Adjacent Sibling Selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Which selector is used to select siblings?

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. Note: the terminology used here in CSS 2.2 is different from what is used in CSS3.

How do I select a second sibling in CSS?

Selecting Only the Next Sibling with Adjacent Sibling Combinator ( + ) The + character used in CSS is a combinator — it combines 2 CSS selectors. It selects the second element, only if it is just after the first element, and both elements are children of the same parent.

How do you exclude an element in CSS?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.


1 Answers

You can't. CSS selectors can only select element nodes. This is why the adjacent sibling combinator works as described.

If you need to apply styles, try applying them to the div and overriding them in the label. This does depend on what styles you're applying, of course, since some of the styles can't be undone or are subject to inheritance.

like image 180
BoltClock Avatar answered Oct 05 '22 23:10

BoltClock