How to Select Child Elements with the Sibling Selector?

Question

How to Select Child Elements with the Sibling Selector?

<p>hello
    <div>test</div>
</p>

<div>yo
    <p>hi</p>
</div>

<p>hello</p>

When I apply the styles below to the code above, I get unexpected results.

p + div {
    color:orange;
}

https://i.sstatic.net/3coK1.png

The style targets the div inside the p tag, but I expected it to only target immediate siblings on the same level. However, when I try:

div + p {
     color:orange;
}

The paragraph inside the div is not styled as shown here:

https://i.sstatic.net/C8Shd.png

Can anyone explain this behavior?

html css css-selectors

Answer 1

Answer №1

Looks like your HTML code is a bit wonky. The <div> element should not be nested inside a <p> tag, but don't worry - the browser will try to fix it for you by rearranging things like this:

<p>hello
  <div>test</div>
</p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

The corrected version will look something like this:

<p>hello</p>
<div>test</div>
<p></p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

Now the selector p + div will target the elements with content test and yo, while hi will inherit its parent's color.

Answer 2

Looks like your HTML code is a bit wonky. The <div> element should not be nested inside a <p> tag, but don't worry - the browser will try to fix it for you by rearranging things like this:

<p>hello
  <div>test</div>
</p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

The corrected version will look something like this:

<p>hello</p>
<div>test</div>
<p></p>
<div>yo
  <p>hi</p>
</div>
<p>hello</p>

Now the selector p + div will target the elements with content test and yo, while hi will inherit its parent's color.

Answer 3

Answer №2

When you place a div inside a p tag, your code breaks.

For example, <div>test</div> is treated as adjacent to the p tag and given an orange color.

Similarly, <div>yo<p>hi</p> </div> is seen as adjacent to another p tag and also receives an orange color.

To understand this better, take a look at the DOM structure created by the code above.

https://i.sstatic.net/XQOos.png

Answer 4

When you place a div inside a p tag, your code breaks.

For example, <div>test</div> is treated as adjacent to the p tag and given an orange color.

Similarly, <div>yo<p>hi</p> </div> is seen as adjacent to another p tag and also receives an orange color.

To understand this better, take a look at the DOM structure created by the code above.

https://i.sstatic.net/XQOos.png

How to Select Child Elements with the Sibling Selector?

Answer №1

Answer №2

Similar questions

"Upon clicking the submit button, no action is triggered and no _POST values are being received

What is the best way to convert CSS to JSS for Material-UI styling?

Is it possible to still alter options in a read-only Select component in Twitter Bootstrap

What is the best way to position a div in relation to a table header (th) but not inside it?

Creating a JSON-based verification system for a login page

Show the nested div when hovering over the containing div using JavaScript

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?

Display the AJAX reply within a designated div based on the selected value

When attempting to read text from an HTML file, JTextPane fails to include a newline character in the output

What is the best way to prevent text wrapping once the viewport border is reached?

Dynamically transforming JSON data into an HTML table

Identifying bots with Python's Requests and BeautifulSoup in web scraping tasks

Customizing the select form arrow in Bootstrap 4: A step-by-step guide

Storing Form Input in Browser's Local Memory

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

Challenges of Python Web Scraping: Insufficient Extraction of HTML Code

Customizing package CSS styles in Angular

Having trouble transferring a variable from getJSON data to PHP

Unique CSS shadow design & alternative solutions

Tips for implementing click events on multiple links iteratively