Do you understand what the > symbol means?
If you understand the code, then you can work out for yourself how to change it. (And if you don’t understand the code, you should be concentrating on doing so, rather than on finding yet another method. 
)
When I wrote the code, I wrote it based off of an example I had seen.
This kinda worked: https://jsfiddle.net/2kq8psmd/
.fence {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 10%;
}
.fence2 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 20%;
}
.fence3 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 30%;
}
.fence4 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 40%;
}
.fence5 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 50%;
}
.fence6 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 60%;
}
.fence7 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 70%;
}
.fence8 {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
background: green;
top: 80%;
}
<div class="fence">
</div>
<div class="fence2">
</div>
<div class="fence3">
</div>
<div class="fence4">
</div>
<div class="fence5">
</div>
<div class="fence6">
</div>
<div class="fence7">
</div>
<div class="fence8">
</div>
<div class="fence9">
</div>
This worked also: https://jsfiddle.net/0m7v9zf6/1/
Is the > symbol/ sign not needed?
.fence div {
position: absolute;
/*top: 0;*/
left: 0;
right:0;
/*width: 100%;*/
height: 0.55%;
background: green;
}
.fence div:nth-child(1) {
top: 10%;
}
.fence div:nth-child(2) {
top: 20%;
}
.fence div:nth-child(3) {
top: 30%;
}
.fence div:nth-child(4) {
top: 40%;
}
.fence div:nth-child(5) {
top: 50%;
}
.fence div:nth-child(6) {
top: 60%;
}
.fence div:nth-child(7) {
top: 70%;
}
.fence div:nth-child(8) {
top: 80%;
}
.fence div:nth-child(9) {
top: 90%;
}
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Is there a difference between:
> selects direct children
whitespace: also selects nested children
.fence>div {
}
.fence>div:nth-child(1) {
}
and
.fence div {
}
.fence div:nth-child(1) {;
}
In your HTML snippet, no, there’s no difference. The only difference would be if you had multiple levels of divs in your HTML. You only have 1 level of div children below .fence so .fence > div and .fence div will select the same element.
It would matter if you had this sort of HTML.
<div class="fence">
<div>
<div>NOTE THAT ".fence > div" won't select me since I'm not a direct div child of ".fence", but ".fence div" will since ".fence div" doesn't care how deep in the HTML "div" is!</div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Not to be rude, but did you not read @TechnoBear’s comment? Understand what you’re applying instead of throwing stuff against the wall and seeing what sticks.
The > combinator looks at direct descendants.
.parent .child { color: blue; }
.parent > .child { color: red; }
It’s just like you could probably achieve that same affect using flex without all that additional markup (especially absolutely positioned which should be avoided as much as possible…). Or even use a svg background repeating pattern.
Flex can be used instead, but how would that be done?
Maybe @PaulOB might know if it is able to.
And then maybe using the gap property to space them out, I am not sure.
This is about a 30 second run (about all the time I have to look at it…) but it comes close…absolute mess in green, flex in red…
Your code does it like this: https://jsfiddle.net/7rt8svuc/
.parent {
display: flex;
flex-direction: row;
}
.fence,
.fence2 {
width: 50%;
margin: 0;
}
.fence2 {
display: flex;
flex-direction: column;
}
.fence2 div {
margin-top: 10.25%;
height: 8px;
background: red;
}
.fence > div {
position: absolute;
/*top: 0;*/
left: 0;
right: 0;
/*width: 100%;*/
height: 0.55%;
/*height: 2px;*/
background: green;
}
.fence > div:nth-child(1) {
top: 10%;
}
.fence > div:nth-child(2) {
top: 20%;
}
.fence > div:nth-child(3) {
top: 30%;
}
.fence > div:nth-child(4) {
top: 40%;
}
.fence > div:nth-child(5) {
top: 50%;
}
.fence > div:nth-child(6) {
top: 60%;
}
.fence > div:nth-child(7) {
top: 70%;
}
.fence > div:nth-child(8) {
top: 80%;
}
.fence > div:nth-child(9) {
top: 90%;
}
<div class="parent">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fence2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Is there a question here? I did a fence2 just to show it side by side with fence and to line it up…
Or a quick and dirty way to get it without all the extra divitis. You have to set a fixed height on the container (I’m guessing there’s a way around it…) but it doesn’t require all the extra divs,
Sorry I wouldn’t use any of that pointless html. Your parent div and indeed your fence div are never used. The div inside the fence div is absolutely placed in relation to the curtain so the 2 outer divs you added are a bit superfluous.
I would simply use one line of css to do all the lines and only needs one div (it actually doesn;t need any if we added it on something else).
.parent {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(transparent, transparent calc(100% - 2px), green calc(100% - 2px), green);
background-size:100% 10.1%;
}
It won’t match exactly to the other one but is so close no one will notice.
Also notice that your green lines are different sizes for each other when you open/close the window because you have sized them in percent again which is not good for borders.
How would this be fixed? https://jsfiddle.net/r18Lu62q/
With the fence it was done using half a percent.
background-image: linear-gradient(
45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
),
linear-gradient(
-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px
);
background-size: 10px 10px;
Removing percent from borders, this would be changed to what?
background:
repeating-linear-gradient(transparent, transparent calc(100% - 2px), green calc(100% - 2px), green);
background-size: 100% 10.1%;
}
Those aren’t borders. Apples/Oranges (i.e. have nothing to do with one or the other…).
How would what be fixed. Your borders were already all over the place so there’s nothing to fix.
Here’s your borders.
The lines aren’t all the same size.
Similar to how this one was adjusted.
Using fractions of a pixel.
Neither are yours!
Try reducing or increasing the calc by a fraction
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
