Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled ponent inside another styled ponent? or is there is another approach instead of using div:first-child or div:nth-of-type(2)??

Any suggestion?

Normal CSS
.ftrlinkbxs .row{margin: 0 -5px; justify-content: flex-start;}
.ftrlinkbxs .col-sm-3{padding: 0 5px; max-width: 33.33%; flex: 0 0 33.33%; }

HTML
        <div class="ftrlinkbxs">
            <div class="row">
                <div class="col-sm-3">
                    <strong>Title...</strong>
                    <ul>
                        <li><a href="#url">.....</a></li>
                    </ul>
                 </div>
             </div>
         </div>

Styled Components
export const Ftrlinkbxs = styled.div`
  width: 100%;
  @media (min-width: 768px){
    div:first-child {
      margin: 0 1px;
    }
    div:nth-of-type(2) {
      padding: 0 5px;
    }
  }
`;

export const Row = styled.div`
 ....
`;

export const ColSm3 = styled.div`
 ....
`;

Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled ponent inside another styled ponent? or is there is another approach instead of using div:first-child or div:nth-of-type(2)??

Any suggestion?

Normal CSS
.ftrlinkbxs .row{margin: 0 -5px; justify-content: flex-start;}
.ftrlinkbxs .col-sm-3{padding: 0 5px; max-width: 33.33%; flex: 0 0 33.33%; }

HTML
        <div class="ftrlinkbxs">
            <div class="row">
                <div class="col-sm-3">
                    <strong>Title...</strong>
                    <ul>
                        <li><a href="#url">.....</a></li>
                    </ul>
                 </div>
             </div>
         </div>

Styled Components
export const Ftrlinkbxs = styled.div`
  width: 100%;
  @media (min-width: 768px){
    div:first-child {
      margin: 0 1px;
    }
    div:nth-of-type(2) {
      padding: 0 5px;
    }
  }
`;

export const Row = styled.div`
 ....
`;

export const ColSm3 = styled.div`
 ....
`;

• javascript
• css
• reactjs
• styled-ponents
• emotion

2 Answers 2

You should be able to target a styled ponent inside a style ponent like that

const Comp1 = styled.div`
   display: flex;
`

// Can be imported from another file
// import Comp1 from './Comp1'
const Comp2 = styled.div`
   ${Comp1} {
      background-color: red;
   }
`

Or maybe a better approach would be to pass the ponent you want as an argument to styled

const Comp1 = styled.div`
   display: flex;
`;

// Can be imported from another file
// import Comp1 from './Comp1'
const Comp2 = styled(Comp1)`
   background-color: red;
`;