0
129
ViewsElemento de enlace que no se muestra cuando se selecciona y se aplica estilo como n de tipo
https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js
¿Por qué no se muestra .row:nth-of-type(1) > .content:nth-of-type(4) .content <Link/> ?
¿Es un error, me estoy perdiendo algo?
import "./styles.css"; import { Link } from "react-router-dom"; export default function App() { return ( <div className="App"> <div className="row"> {/* I dont want this div to be a Link */} <div className="content"></div> <Link to="/" className="content"></Link> <Link to="/" className="content"></Link> <Link to="/" className="content"></Link> </div> <div className="row"> <Link to="/" className="content"></Link> <Link to="/" className="content"></Link> <Link to="/" className="content"></Link> <Link to="/" className="content"></Link> </div> </div> ); } .App { height: 100vh; width: 100vw; } .row:nth-of-type(1) { height: 500px; width: 100%; display: grid; grid-template-areas: "aabc" "aadd"; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; } .row:nth-of-type(1) > .content:nth-of-type(1) { grid-area: a; background-color: orange; } .row:nth-of-type(1) > .content:nth-of-type(2) { grid-area: b; background-color: blue; } .row:nth-of-type(1) > .content:nth-of-type(3) { grid-area: c; background-color: green; } .row:nth-of-type(1) > .content:nth-of-type(4) { grid-area: d; background-color: red; } 
No estoy buscando un enfoque alternativo para lograr el mismo resultado, simplemente estoy preguntando por qué el cuarto <Link/> no se muestra para saber qué está fallando.
·
Santiago Trujillo
1 answers
Answer question0
Use el psuedoselector :nth-child ya que está mezclando tipos de elementos ( div y Link ( a )) , no hay un cuarto elemento de tipo de enlace para diseñar.
.row:nth-of-type(1) > .content:nth-child(1) { grid-area: a; background-color: orange; } .row:nth-of-type(1) > .content:nth-child(2) { grid-area: b; background-color: blue; } .row:nth-of-type(1) > .content:nth-child(3) { grid-area: c; background-color: green; } .row:nth-of-type(1) > .content:nth-child(4) { grid-area: d; background-color: red; } 
·
Santiago Trujillo
Report
Answer question