Content' Attribute to Inherit Node Value

content' attribute to inherit node value

No, there's no way to do that. That's not what inherit is for.

The closest you can get is this:

<h2 data-title="Random title">Random title</h2>

h2:after {
    content: attr(data-title);
}

..which is obviously horrible because of the duplication.

Children :before content inheritance

A ::before/::after pseudo-element cannot inherit from another ::before/::after pseudo-element. A pseudo-element can only inherit from its originating element — this is the element that the pseudo-element is attached to. A pseudo-element cannot even inherit from the parent of its originating element, unless the originating element itself is also inheriting from its parent and the property involved is not content.

In your example, .foo::before can only inherit from the .foo it's attached to, and likewise for .baz::before and .baz. .baz::before cannot inherit from .foo::before, so what you're trying to do is not possible. There does not appear to be a reliable way to ensure that one pseudo-element always inherits from another pseudo-element through CSS alone without enforcing this within the markup itself.

Why does Attr inherit from Node in the DOM?

With a "why" question, you need to be very clear whether you are asking

• what are the potential benefits of this decision?, or

• historically, what arguments were put forward and why did individual committee members vote the way they did (if indeed there was a discussion and a vote)?

In most cases the second question is unanswerable, though in a few cases (such as the Annotated XML specification by Tim Bray) you can at least see the rationale put forward by one of the editors.

To me the decision feels like a compromise. Attributes have many properties in common with other nodes, so there's an advantage in having them implement the same interface; but there's baggage that you don't really want because it might add unnecessary cost, like having a link to the containing element.

Frankly, DOM is not a good piece of design, and it's very hard to say why it made so many design mistakes, other than that it was put together by a committee in a hurry. Later models such as JDOM and XOM are much better, but sadly not available for Javascript.

How to get the inherited values of element from JavaScript

You can simply implement a pixel-to-rem converter and use that:

function convertPixelsToRem(pixels) {
    return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem");
}

console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"]));

<style>
  #new {
    font-size: 2rem;
  }
</style>

<div id="new">
  <h1 class="h1">This is a heading</h1>
  <!–– Here h1 is inheriting font-size from div ––>
</div>

Use content of an element in attr() of pseudo-element

You can only do: DEMO

<span class="page-number" data-number="item No.42">42</span>

span:after {
    content: attr(data-number);
}

or in your case:

<span class="page-number" data-number="42"></span>

Inherit property of parent node for current node in cypher - neo4j

Find root node, take path from root to node, and find in this path the first node with the desired property:

// Find root
MATCH (root:Object) WHERE NOT (:Object)-[:child]->(root) WITH root

// Loop through nodes
MATCH (n:Object) WITH n, root

// The path from the root to the node
MATCH path = (root)-[:child*0..]->(n)

WITH n, 
     // An array of properties (including those which are null)
     EXTRACT(node IN NODES(path) | node.levelId) AS levelIdsForTest

WITH n,
     // Filter the ones that are not null
     FILTER(level IN levelIdsForTest WHERE level IS NOT NULL) AS levelIds

RETURN n.id           AS id,
       n.levelId      AS selfId,
       // Take the last one - it is the nearest
       LAST(levelIds) AS inheritId

CSS set attribute to element but not to descendants

No, you cannot set a property so that it would be exempted from inheritance, except of course when the problem is not inherited by definition.

If you set e.g. color on an element, then this value will be inherited by all children of that element, unless they themselves have color set on them. This is part of the very idea of CSS cascade. You cannot prevent it; you can just adapt to it.

Thus, you would need to set the property to those descendants that should not inherit it. It needs to be set to a specific value; there is no way to skip levels in inheritance (e.g. make an element inherit from its grandparent and not from its parent).

---

Related Topics