Add border to the first slide in Xaringan with CSS

Question

I would like to include a red border to the first xaringan slide:

This is my Rmd code:

    ---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    css: ['presentation_1.css']
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# First Slide



---
# Second Slide

---
# Third Slide

---
# Fourth Slide

---

In css file I did:

.remark-slides-area div:first-child {
    border: 5px solid red;
}

Why it didnt work?

Answer 1

If you consider the title slide the first slide then:

.title-slide {
    border: 5px red solid;
}

Or, if the first slide is not the title:

.remark-slide-container:first-child .remark-slide-content {
    border: 5px red solid;
}

You can also try this which is close to your attempt:

.remark-slides-area > div:first-child {
    border: 5px solid red
}