'CSS get attribute of other element

I have a very simple question:

Is there a pure-CSS way to get the attribute (value) of a different element or attribute?

(And yes, I know that CSS isn't an actual programming language - but there could be a feature)

Every now and then i stumble upon new possible (very different!) use cases but here two that come to my mind at this moment:

(1) ONE example OF MANY: 1.p and div are "sibling"Elements. 2.div is supposed to take up the rest of the space, their parent provides 3.To calculate the div's size, one (div) needs the other (p)'s height. When the rule is e.g. generally used for several elements, no matter p's content size.

(2) ANOTHER example: Orienting the height of a child's element at it's parent's width or a structurally unconnected element. Not the window's width (vw).

The general goal is to not use javascript or wangle with html for styling, since only css should be used for that, that's it's point.

PS:THE ORIGINAL QUESTION HAD A WORSE EXAMPLE, HENCE SOME ANSWERS MAY NOT ENTIRELY FIT THE NEW QUESTION

css


Solution 1:[1]

With what you've described in your question, the basic nature of CSS will fit what you're asking.

  • H6 and button are siblings.
  • H6 and button are separate by the nature of HTML.
  • You will need to find the font-family of h6, and manually apply it to the button, using a css rule.

Unless of course you are asking if CSS can dynamically read an elements attributes after page load, and copy it's attributes over on it's own, in real time, then no.

h6 {
  font-family times;
  color: purple;
  font-size: 1rem;
  margin: 0;
  font-weight: normal;
}
h6, button {
  font-family: arial;  
  color: orange;
  font-size: 2rem;
}
<div class="container">
  <h6>TITLE</h6>
  <button>BUTTON</button>
</div>

Solution 2:[2]

You can ensure two or more elements share a font-family without using combinators (+, , >, etc.) by using CSS custom variables. You cannot make one element directly refer to another element this way.

First, add a variable as follows to a globally-accessible selector like the root pseudo-class:

:root {
  --main-font-family: times;
}

Now, you can refer to the above value by using the syntax var(--[var-name]):

h6 {
  font-family: var(--main-font-family);
  ...
}

button {
  font-family: var(--main-font-family);
  ...
}

This approach can be helpful with more complex applications, and in my opinion can be more clear than having multiple selectors with varying specificities overriding one another.

Solution 3:[3]

The only information you can "get" in CSS are the elements themselves through tags, classes, ids, attributes, etc.

You may however style elements and their siblings using the sibling selector.

h6, h6 + button {
  font-family: value;
}

You may then have separate codeblocks for the specified selectors

h6 {
  property: value;
}
button {
  property: value;
}

If you'd like to learn more about the CSS adjacent and general selectors, I would refer to this link: W3Schools Combination Selectors

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Raheel Junaid

Related Questions