KPC
Kevin Powell - Community•16mo ago
Avinash

Need help with Order for display flex

Order is used to change to position of the child elements in a flex box. i tried the same but its not quite the same. there is a main div location-jokes container which has display:flex and flex-direction:column properties . Now i wanted to reverse the order of childs so i used following order to change the position, the child position is changed but the grandchildren position is affected by this, how to fix it, so only child position is moved ? i have attached the code and ss for better understanding 
    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }
    .location-jokes :first-child {
        order: 2;
        margin: 1rem 0;
       
    }

    .location-jokes :nth-child(2) {
        order: 1;
        margin: 1rem 0;
        
    }
https://codepen.io/avinash-tallapaneni/pen/ExRomwX
Avinash-Tallapaneni
CodePen
Basketball scoreboard
...
3 Replies
Avinash
Avinash•16mo ago
if you look at the outline after order is applied grandchildrens are getting affected
13eck
13eck•16mo ago
It's affecting the grandchildren because your CSS tells it to. You're using the Descendant combinator selector: 
.location-jokes :first-child {

}
.location-jokes :first-child {

}
Note the space ( ) between the two identifiers. What you want is the Child combinator: 
.location-jokes > :first-child {

}
.location-jokes > :first-child {

}
Note the >: that says "only direct children". https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#combinators
Avinash
Avinash•16mo ago
oh. it worked jollykevin
Want results from more Discord servers?
Add your server
More Posts
Fish out of water in server side questions ...Hi! I was just offered a web dev job by a friend, and since one can't sit and to tutorials for the What is pre?I was reading Chromes news about nesting being available (YEAH!!), and this Codepen revelas if you'rwhy aspect-ratio needs a display to work?Hi I want to use aspect-ratio to make a rectangle and then make it a circle; but the <a> is not resAtomic Design and ReactI am following Brad Frost's Atomic Design principles in React and am wondering if I'm creating an anIssues with cards in responsive designim having issues with cards in responsive design, i narrowed down the issue to images where i declarCannot remember the title of one of Kevin's videosCan anyone remember one of Kevins videos where he was talking about how we often set margin top and Is this overusing of hooks or am I paranoid ?During my reactjs journey I always was puting inside hooks function which requires either access to Which is better: ./style.css or just style.css?I've been using `./script.js` or `./style.css` in my HTML files, but I see developers/designers bet