How would this be written without > sign

asasass · December 7, 2021, 2:27pm

If I wasn’t using > sign how would it have been written without it?

.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>

TechnoBear · December 7, 2021, 2:41pm

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. )

asasass · December 7, 2021, 2:51pm

When I wrote the code, I wrote it based off of an example I had seen.

asasass · December 7, 2021, 3:14pm

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>

asasass · December 7, 2021, 3:19pm

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>

asasass · December 7, 2021, 3:20pm

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) {;
    }

RyanReese · December 7, 2021, 3:24pm

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>

DaveMaxwell · December 7, 2021, 3:29pm

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.

asasass · December 7, 2021, 3:31pm

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.

DaveMaxwell · December 7, 2021, 3:40pm

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…

asasass · December 7, 2021, 3:47pm

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>

DaveMaxwell · December 7, 2021, 3:59pm

Is there a question here? I did a fence2 just to show it side by side with fence and to line it up…

DaveMaxwell · December 7, 2021, 4:15pm

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

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.

asasass · December 7, 2021, 4:58pm

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

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%;
}

DaveMaxwell · December 7, 2021, 5:21pm

Those aren’t borders. Apples/Oranges (i.e. have nothing to do with one or the other…).

PaulOB · December 7, 2021, 5:37pm

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

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

Neither are yours!

Try reducing or increasing the calc by a fraction