Unclear about how inheritance works with the general sibling combinator "~" (tilde)?

Question

Unclear about how inheritance works with the general sibling combinator "~" (tilde)?

When attempting to color list items in an unordered list using the general sibling combinator, nothing seems to happen:

p {
  color: blue
}
h1 ~ li {
  color: red;
}

<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy </p>
<ul>My list
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

However, a span inside a paragraph colors with no issues at all:

http://jsfiddle.net/93khsvbn/

p {
  color: blue
}
h1 ~ p span {
  color: red;
}

<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy <span> heyo </span></p>
<ul>My list
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

So, is the span on equal footing with the paragraph when it comes to inheritance even though it's nested within the paragraph? Why? A comprehensive source for learning about inheritance seems hard to come by.

Also, just as a side note... how can I style the title of an unordered list without affecting the list items? Is assigning an identifier to the ul necessary? Styling the ul would result in the list items inheriting that styling as well.

css

Answer 1

Answer №1

Looking at your initial example (h1 ~ li) it's interpreted as:
Locate any li elements that are siblings of and come before a h1. Since the li items belong to a ul, this condition is not met.

In the second scenario (h1 ~ p span), you're essentially stating:
Find any span elements that are child of a p which is a sibling of and comes before a h1. This rule does match the given hierarchy.

If you want the first rule to be applicable, consider using h1 ~ ul li instead. This expression conveys:
Retrieve any li elements that are children of a ul which is a sibling of and preceded by a h1.

p {
  color: blue
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Additionally, please note that the text "My List" doesn't fit into the ul; it should be enclosed within li tags. To distinguish it from other list items, you can either:

Add a class:
```
<li class="heading">My List</li>
```
Place it outside the list:
```
<h2>My List</h2><ul>
```
Utilize the first-child selector: li:first-child {color:green;}

p {
  color: blue
}
li:first-child {
  color:green;
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>My List</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Answer 2

Looking at your initial example (h1 ~ li) it's interpreted as:
Locate any li elements that are siblings of and come before a h1. Since the li items belong to a ul, this condition is not met.

In the second scenario (h1 ~ p span), you're essentially stating:
Find any span elements that are child of a p which is a sibling of and comes before a h1. This rule does match the given hierarchy.

If you want the first rule to be applicable, consider using h1 ~ ul li instead. This expression conveys:
Retrieve any li elements that are children of a ul which is a sibling of and preceded by a h1.

p {
  color: blue
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Additionally, please note that the text "My List" doesn't fit into the ul; it should be enclosed within li tags. To distinguish it from other list items, you can either:

Add a class:
```
<li class="heading">My List</li>
```
Place it outside the list:
```
<h2>My List</h2><ul>
```
Utilize the first-child selector: li:first-child {color:green;}

p {
  color: blue
}
li:first-child {
  color:green;
}
h1 ~ ul li {
  color: red;
}

<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
  <li>My List</li>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Answer 3

Answer №2

Joshua K pointed out that the <h1> is a sibling of the <ul>, meaning they are on the same dom level. You can access a sibling's children by using this selector:

h1 ~ ul > li

If you're looking for a complete inheritance guide, CSS selectorshere will be helpful in learning about dom inheritance and element relationships.

In regards to your last question, there is no header in a <ul>. In your example, "My List" is simply plain text. To style it, you have two options:

1) The less desirable option is to style the entire <ul>, then override the attributes in the <li> elements.

2) Alternatively, wrap your title in an element such as <span>My List</span> and apply styles to ul>span.

Answer 4

Joshua K pointed out that the <h1> is a sibling of the <ul>, meaning they are on the same dom level. You can access a sibling's children by using this selector:

h1 ~ ul > li

If you're looking for a complete inheritance guide, CSS selectorshere will be helpful in learning about dom inheritance and element relationships.

In regards to your last question, there is no header in a <ul>. In your example, "My List" is simply plain text. To style it, you have two options:

1) The less desirable option is to style the entire <ul>, then override the attributes in the <li> elements.

2) Alternatively, wrap your title in an element such as <span>My List</span> and apply styles to ul>span.

Unclear about how inheritance works with the general sibling combinator "~" (tilde)?

Answer №1

Answer №2

Similar questions

Fixing a dropdown menu with multiple levels

Creating rounded buttons with Font Awesome icons and hover effects

"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

Ways to modify the background images in doxygen

Initiate a fresh start with an automatic input reset

Troubleshooting CSS issues in HTML pages

How can I eliminate unnecessary gaps in a CSS slider design?

External elements - My physical being is in a state of chaos

What is the best way to animate specific table data within a table row using ng-animate?

When the content div is clicked within the overlay div, the popup will also close

Styling CSS: Adjusting font sizes for placeholders and text boxes

Display updated text on hover over button panel

What steps can I take to prevent a css-generated svg file from occupying more space than the original image? My wave appears to be 239px tall, while the svg file is a massive 1500px in height

Loading message displayed in web browsers by banner rotation system

Enhance Your Images with Hovering Icons

Customize the position of the date picker for HTML native <input type="date">

JavaScript MP3 player

The PNG image that is stored in the MySQL database is not displaying completely on the web browser

html: div broken

The sticky top feature of the Bootstrap 4 navbar does not function properly when it is nested inside a div