KPC
Kevin Powell - Communitysnxxwyy

get value of sibling above

Hey, if i have a structure like so: 
<p class="a">...</p>
<p class="b">...</p>
<p class="a">...</p>
<p class="b">...</p>
.a {
  color: blue;
}
.a {
  color: blue;
}
in terms of the p tag with the class of b, would it be possible to get the value from the color property from the sibling above it so i can utilize that within the styles of b? Thanks in advance.
C
clevermissfox•17d ago
you could just add the 'a' class to b?
S
snxxwyy•17d ago
thank you, but i'm more looking for a method of grabbing a value from a sibling that's above it.
C
clevermissfox•17d ago
you could set it with a custom property then also set that property to b
ἔρως•17d ago
just set the same class
S
snxxwyy•17d ago
thank you but that's still not quite what i'm looking for unfortunately, i'll provide some further context: I have a layout like so that's utilizing a flow utility 
<div class="flow">
  ...
  <div class="flow">
    ...
  </div>
</div>
<div class="flow">
  ...
  <div class="flow">
    ...
  </div>
</div>
.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}
.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}
If the parent div's flow-space value is 5rem, which sets a 5rem gap between it's children, and i'd like to set the child's flow-space value to 10rem, it sets a 10rem gap between it's children like expected but due to the way the property cascades it changes it's flow-space value in the parent div making a 10rem space above it instead of keeping the 5rem space which isn't wanted. I wanted to see if i could set the margin-top property of an element with a flow utility that happens to be a child of an element utilizing it also to either it's parent's of the child above it's value. 
.flow:has(> .flow) .flow {
  margin-top: ...;
}
.flow:has(> .flow) .flow {
  margin-top: ...;
}
ἔρως•17d ago
don't try to get fancy and build overly overcomplicated spaghetti lasagna with onions that you can't debug in a month keep it simple if you want to set the top margin, just set the top margin or have a css variable for it
S
snxxwyy•17d ago
i was trying to make it versatile so i didn't have to do that, if it's a child of a parent also using the same value it would just automatically make the top margin the same as the child's above it.
ἔρως•17d ago
so, for all elements inside the 2nd .flow it will always have that 10rem top margin?
S
snxxwyy•17d ago
it could be any value, 10, 2, 8, etc.
C
clevermissfox•17d ago
why cant you just set the child's margin to calc(var(--flow-space) * 2)? or get the value of --flow-space since its a custom property and do what you need to with JS?
S
snxxwyy•17d ago
i could indeed do that for this example, but as i mentioned, they both can be any value, it's unlikely the child's property value would be double the parents. The parent's could be 2.5rem and the child's 7.3rem
ἔρως•17d ago
i still think you're overcomplicating something simple
C
clevermissfox•17d ago
your example was that the parent's was 5rem, and the child's was 10rem so thats the info we are going off of. once you have the value of the parent's whether its 10rem or 2.5rem, what are you trying to do with the childs margin?
S
snxxwyy•17d ago
I'll try to explain the whole thing a little better if you put a flow utility on an element and specify the flow-space custom property value, it adds margin-top to the children with that value to space the children out. Using this as an example: 
<div class="flow">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>
<div class="flow">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>
div {
  --flow-space: 2rem;
}
div {
  --flow-space: 2rem;
}
there would be a 2rem gap between all the p tags. You can change the individual spacing of an element by changing it's --flow-space value, so if i did this: 
p:nth-of-type(2) {
  --flow-space: 5rem;
}
p:nth-of-type(2) {
  --flow-space: 5rem;
}
it would create a larger space above the second p tag. If i had a child of a parent that's using a flow utility, with the parent also using a flow utility, specifying a value for the child's --flow-space property adds spacing between it's children as usual however since it's a child of a parent using the utility, it also changes it's personal property changing the space above it too. I trying to find a method to make the margin-top of the child basically not do that and to remain as it was.
C
clevermissfox•17d ago
the parents margin-top should not increase if you redfine/increase the custom-property value on the child. custom properties dont inherit up maybe make a codepen with the issue youre experiencing because the parents --flow-space value should not be affected by increasing the childs --flow-space value
S
snxxwyy•17d ago
the parent's flow space value isn't being affected, it's just the child div's since as well as adding space between it's children, it's redefining it's individual flow-space value like i demonstrated with the nth-of-type example.
C
clevermissfox•17d ago
okay, i see. thats how it works. i would make two custom properties then, one for the parent and direct-children's margin's and one for the grandchildren margins. or use different class names. or use an @property set to not inherit for the properties you dont want to inherit. or change your selectors from .flow:has(.flow). Youre using the same class names and the same custom properties so everything is going to trickle down. or just use grid and gap
S
snxxwyy•17d ago
i unfortunately don't think the @property works, i couldn't get it to work with rem which was odd so i used colors for an example, it still seems to inherit to a div it shouldn't if i've understood it correctly. https://codepen.io/deerCabin/pen/QWPPjWR
R
CodePen
@property query
...
C
clevermissfox•17d ago
again this example is working as it should. You have used the custom property on the selector > * + * which means any direct child of the .flow that has anything after it (whether a p tag or a div or any element) . the inherits on color @property sets whether it inherits by default. but css by design will inherit the value of the color of its parent.
S
snxxwyy•17d ago
ah that's a shame then, i don't think what i was looking for the way i was looking for it is possible haha, thank you all for your help 🙂
C
clevermissfox•17d ago
sorry i cant be more helpful, everything you described as behviour is the behaviour of css given the code youre writing. you cant use the same custom properties and the same classes and expect it to yield different results. maybe :nth-of-type ranges with a combination of > and + selectors can get you to target the exact elements you want to set
S
snxxwyy•17d ago
it's all good, no worries, you both were helpful, i feel this ones quite complex to achieve simply unfortunately
C
clevermissfox•17d ago
i would just use more than one custom property or change some classnames or mess with the selectors. or use gap. gap rocks
Want results from more Discord servers?
Add your server
More Posts
Error I dont understandHI everyone somebody can explain me what is going wrong hereSearch bar jsHow do i get results from my search barCan't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I cHow to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing upUsing escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return: ``` <ul className="quickLink_list"> <li> creating calculator``` let operatorsArray = document.querySelectorAll('.operator') function bgColor(a){ let bgCol