remark icon indicating copy to clipboard operation
remark copied to clipboard

Gray out previous bullets (with nested list)

Open szpak opened this issue 9 years ago • 2 comments

There is a nice example in remark demo presentation how to gray out previous bullets in CSS with last-of-type and last-child selectors. Unfortunately it doesn't work nicely with nested list and I don't know if it could be achieved just with CSS (although I'm newbie to CSS, so please let me know if I'm wrong).

Example. Step 1.

 - 1st point
  - 1a
  - 1b

Everything is black.

Step 2.

 - 1st point
  - 1a
  - 1b
 - 2st point
  - 2a
  - 2b

Everything 1* is grey, 2* is black. With last-* selectors I can't gray out evectively 1b.

Maybe remark could provide some additional class for the elements that were already visible on the previous slide (when -- is used) to be able to modify them in CSS?

szpak avatar Jan 26 '16 12:01 szpak

What exactly is it you want to achieve? Which of the bullets should be what color in your step 2?

gnab avatar Jan 26 '16 17:01 gnab

In the basic case: Step 1

 - 1st point - black
  - 1a - black
  - 1b - black

Step 2

 - 1st point - gray
  - 1a - gray
  - 1b - gray
 - 2st point - black
  - 2a  - black
  - 2b  - black

However, later I thought that someone could prefer a situation like below:

Step 2b

 - 1st point - gray
  - 1a - gray
  - 1b - gray
 - 2st point - black
  - 2a  - black

Step 3b

 - 1st point - gray
  - 1a - gray
  - 1b - gray
 - 2st point - gray
  - 2a  - gray
  - 2b  - black

Nevertheless if there was a marker (a class) what elements was present at the previous slide it should be possible to easily implement in CSS as well.

szpak avatar Jan 26 '16 21:01 szpak