https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js
Why is the .row:nth-of-type(1) > .content:nth-of-type(4)
.content <Link/>
not displaying?
Is it a bug, am I just missing something?
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: "a a b c" "a a d d"; 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; }
I am not looking for an alternative approach to achieve the same result, I am simply asking why the fourth <Link/>
is not displaying so I know what is going wrong.
Advertisement
Answer
Use the :nth-child
psuedoselector since you are mixing element types (div
and Link
(a
)), there isn’t a 4th link type element to style.
.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; }