Menu
I have an element that has a child and another element with the same child, but there is also a text node:
<p><strong>This should be heading</strong></p>
...
<p>There is a sentence that has <strong>strong text</strong> inside it.</p>
I do not have the ability to modify the DOM structure in any way, including no JavaScript. All I can do is edit CSS, but I want to style the inline strong differently than the strong that is the only child.
I thought this might work:
p strong:only-child
{
color: red;
}
However, both items turn red.
Is there a way to target child nodes that don't have text node siblings, using only CSS?
I don't think it can be done, but I figured I'd ask in case there is some sort of clever work-around.
954
Any subnode of a given node is called a child node, and the given node, in turn, is the child's parent. Sibling nodes are nodes on the same hierarchical level under the same parent node. Nodes higher than a given node in the same lineage are ancestors and those below it are descendants.
It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinator ( > ), which is placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.
Child Selector: Child Selector is used to match all the elements which are children of a specified element. It gives the relation between two elements. The element > element selector selects those elements which are the children of the specific parent.
Introduction to CSS Child Selector. CSS child Selector is defined as the CSS selector that selects only elements that are direct children which is clearer than the contextual selector.
As per my understanding I think it should be like
p:first-child
{
color: red;
}
JSFiddle
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
