Apply slide specific CSS in ioslides_presentation on specified div classes only

Question

How can I change the h2 header styles for specific slides only using the {} syntax?

I want to create a html presentation using rmarkdown and ioslides.

Some of the main slides should include images, and their titles should not overlap the image.

I am trying to influence their layout using some css ID (or class) specified in the www/cust.css file.

markdown:

---
title: "TITLE"
subtitle: "subtitle"
output:
   ioslides_presentation:
    css: www/cust.css
---

# Main 0

## sub

# Main 1 {.cust-1 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 3 {#cust-3 .rcorners}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("www/SMPTE_Color_Bars.svg")
` ``

css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

.cust-1 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}


.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

#cust-3 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

#cust-4 {
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -10px;
  bottom: 60px;
}

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;breaker.s
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

<style>
div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;

However the problem i am facing is that i can't influence the h2 header class via the {.cust-x} or {#cust-x} syntax.

It either influences the image and subtitle:

or, if i use h2like this:

.cust-2 h2{
  font-weight: 200;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

it has no influence whatsoever.

Usually these markdown first level header slides are using this css:

.auto-fadein h2{
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  top: 0px;
}

But i cant change this class because it will interfere with the title page, etc.

EDIT

The syntax: {} works fine if i try to target other html objects for examle using this css style:

.rcorners img{
  border-radius: 45px;
  padding: 20px;
}

gives me rounded image corners in example 1 and three where it is applied.

Answer 1

Problem

As you figured out, .cust-1 h2 {} wasn't targeting the heading you wanted. This is because the HTML structure is different than you thought.

How do you know how to target the element you want?

Step 1: Click Knit to HTML (ioslides) in RStudio

Step 2: Click Open in Browser

Step 3: Use Developer Tools (i.e., press the F12 key in your browser)

You can see that the HTML structure is the following:

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

Screenshot:

Solution 1

For example, to target the <h2> in the fourth slide (i.e., Main 1) use the following CSS:

/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  /* Your CSS */
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  /* Your CSS */
}

See my-presentation.Rmd and styles.css below for the full solution.

my-presentation.Rmd

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

# Main 1 {.cust-1}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
# Main 2 {.cust-2}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 3 {#cust-3}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

# Main 4 {#cust-4}

```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```

styles.css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

/**************** Slide 4 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='4'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='4'] h2 {
  color: blue;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 5 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='5'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='5'] h2 {
  color: red;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 6 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='6'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='6'] h2 {
  color: green;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

/**************** Slide 7 ****************/
/* Style the position of the <h2> wrapper */
slide[data-slide-num='7'] .auto-fadein {
  bottom: 60px;
}

/* Style the <h2> */
slide[data-slide-num='7'] h2 {
  color: purple;
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
  bottom: 60px;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

---

EDIT

You didn't understand what I wrote above. I'll try to simplify.

If you write:

# Main 1 {.cust-1}

The HTML structure will be the following:

<hgroup class="auto-fadein">
  <h2>Main 1</h2>
</hgroup>
<article id="main-1" class="cust-1">
  ...
</article>

Meaning, you can't style the <h2> the way you want to (i.e., with the following CSS: .cust-1 h2 {}) because it's not a child or descendant of the <article> with the class="cust-1". See Solution 1.

But if you really want to style the <h2> with a class, then see Solution 2.

Solution 2

You can add a class to the <h2> like this:

<h2 class="main-1">Main 1</h2>

See my-presentation.Rmd and styles.css below for the full solution.

my-presentation.Rmd

---
title: "Title"
subtitle: "Subtitle"
output:
  ioslides_presentation:
    css: styles.css
date: "2023-05-30"
---

# Main 0

## sub

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-1">Main 1</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-2">Main 2</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-3">Main 3</h2>

#
```{r,echo=FALSE, fig.cap= "an img caption", out.width= '50%', fig.pos='top'}
knitr::include_graphics("./SMPTE_Color_Bars.png")
```
<h2 class="main-4">Main 4</h2>

styles.css

slides > slide:not(.nobackground):before {
  left: initial;
  bottom: initial;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-size: 115px 115px;
}

h2.main-1,
h2.main-2,
h2.main-3,
h2.main-4 {
  font-weight: 200;
  font-size: 100px;
  line-height: 1.1;
  position: relative;
  left: -6px;
}

/**************** Main 1 ****************/
h2.main-1 {
  color: blue;
}

/**************** Main 2 ****************/
h2.main-2 {
  color: red;
}

/**************** Main 3 ****************/
h2.main-3 {
  color: green;
}

/**************** Main 4 ****************/
h2.main-4 {
  color: purple;
}

.gdbar img {
  width: 150px !important;
  height: 150px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 250px !important;
  height: 170px !important;
}

aside.gdbar {
  left: initial;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  background-position: right;
}

div.footnotes {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 80%;
  font-size: 0.6em;
}

Output