Apply slide specific CSS in ioslides_presentation on specified div classes only

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.

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