CODEWITHSUNDEEP
htmlcssinheritanceparent
UnorthodoxThing
UnorthodoxThing

Reputation: 139

What is 'parent' in HTML or CSS?

I was introduced to the following code:

<!DOCTYPE html>
<html>
<head>
<style>
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}
</style>
</head>
<body>

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>

<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

</body>
</html>

Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit

I'm not sure why the colour of the extra span is green. When they use the 'inherit' value, do they take a colour similar to the first one introduced? Is that what it is?

What's the 'parent' and 'child' referring to here? What's their definition?

Upvotes: 2

Views: 30422

Answers (4)

Vaibhav Kaul
Vaibhav Kaul

Reputation: 1

In this, you have used both Internal and Inline styling at the same time. Since Inline styling has the highest precedence over Internal and External Styling that is why that extra span turns out to be Green.

Upvotes: -2

Albert Lazaro de Lara
Albert Lazaro de Lara

Reputation: 2710

If we have a <p> inside a <div> element, the <div> is the parent of the <p> and the <p> is the child of the <div>

<div>
  <p></p>
</div>

You can read this web: https://www.w3schools.com/js/js_htmldom_navigation.asp it explains perfectly.

The nodes in the node tree have a hierarchical relationship to each other.

The terms parent, child, and sibling are used to describe the relationships.

  • In a node tree, the top node is called the root (or root node)
  • Every node has exactly one parent, except the root (which has no parent)
  • A node can have a number of children
  • Siblings (brothers or sisters) are nodes with the same parent

enter image description here

CSS uses this structure to make specific selectors like first-child, :nth-child(n), :last-child...

You can see all CSS selectors here

The value inherit of a CSS attribute applied to an HTML node, simply takes the parent value of the attribute.

So if I have an html like this:

<div>
   <p></p>
   <p class="red"></p>
</div>

And css like:

div {
   background-color: red;
}

div > p {
  background-color: blue;
}

.red {
  background-color: inherit;
}

The div with the red class, using inherit will take the value red of the parent.

Upvotes: 5

caramba
caramba

Reputation: 22480

inherit summary: from https://developer.mozilla.org/en/docs/Web/CSS/inherit

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

Brake down your code to single parts to understand what's going on like:

span {
    color: blue;
    border: 1px solid black;
}

This means every span has a blue color.

Moving on to next lines:

.extra span {
    color: inherit;
}

This means every span inside an element with a class="extra" will inherit the color. Means all the <span>s inside .extra will take it's parent color.

Now as you see in your result every span has blue color, except the one inside the div with class extra which has an inline style on color saying it is green.

Upvotes: 2

Bango
Bango

Reputation: 1001

Since the <span></span> elements are nested within their 'parent' <div></div> elements, they are said to be 'children' of the 'parent' div.

<div id="parent">
  <span id="child1"></span>
  <span id="child2"></span>
  <span id="child3"></span>
</div>

The 3 spans are children of the parent div, and siblings of each other. Much like a family. When a child inherits styles from its parent, it uses the same style as its parent uses for that particular style.

color: inherit;

means that when assigning the span its color, it will defer to whatever the parent color is, which in this case was green.

Upvotes: 4

Related Questions