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 component inside another styled component?
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`

 ....

`;