If I wasn’t using >
sign how would it have been written without it?
https://jsfiddle.net/1egswr4L/
.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="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
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. )
This is the last section in our lessons on selectors. Next, we'll move on to another important part of CSS — the cascade, specificity, and inheritance.
3 Likes
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>
1 Like
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.
4 Likes
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…
1 Like
asasass
December 7, 2021, 3:47pm
11
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…
1 Like
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,
PaulOB
December 7, 2021, 4:34pm
14
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.
2 Likes
asasass
December 7, 2021, 4:58pm
15
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;
asasass
December 7, 2021, 5:16pm
16
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…).
PaulOB
December 7, 2021, 5:37pm
18
asasass:
How would this be fixed?
How would what be fixed. Your borders were already all over the place so there’s nothing to fix.
Here’s your borders.
asasass
December 7, 2021, 5:39pm
19
The lines aren’t all the same size.
Similar to how this one was adjusted.
Using fractions of a pixel.
PaulOB
December 7, 2021, 6:09pm
20
Neither are yours!
Try reducing or increasing the calc by a fraction
1 Like