# Hide Pluto.jl cell in static html with CSS

**URL:** <https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057>\
**Category:** Pluto\
**Created:** [August 11, 2024, 3:51pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057 "2024-08-11T15:51:01Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 11, 2024, 3:51pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/1 "2024-08-11T15:51:01Z")

</div>

👋 Hello

I use Pluto notebooks to teach.  
In the static html versions I make available for the students, I would like to hide certain cells (for example, the one with a `@htl` block with my CSS tricks).  
I am trying this:

```css
pluto-cell#2d509cd9-2838-48c9-951e-01853b0d2dab {
    display: none;
}

```

But it doesn’t work…  
Anyone can help me?

Thank you!

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 11, 2024, 6:49pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/2 "2024-08-11T18:49:40Z")

</div>

Can you post an example of a cell you would like to hide?

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 11, 2024, 7:03pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/3 "2024-08-11T19:03:52Z")

</div>

Sure!

For example, I like to import the packages in the beginning:

 ![Screenshot from 2024-08-11 19-59-43](https://global.discourse-cdn.com/julialang/original/3X/d/9/d957a0d61290829d2ff3d7b3c2fc2c8da80e1ed9.png)

In the static HTML, hiding the code, it becomes:

 ![Screenshot from 2024-08-11 20-00-09](https://global.discourse-cdn.com/julialang/original/3X/9/3/93a9c268a4b7cd3168931a34334777a211bebda3.png)

But you see that big space in the beginning?  
It results from 5 cells with several tweaks that I want to hide in a presentation, without generating a big blank zone.

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [August 11, 2024, 7:04pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/4 "2024-08-11T19:04:43Z")

</div>

I think you are facing this issue with the ID selector:

> <https://stackoverflow.com/questions/30938244/how-to-select-an-element-that-has-an-id-which-begins-with-a-digit>

Try to use the attribute selector as suggested in the link

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [August 11, 2024, 7:07pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/5 "2024-08-11T19:07:00Z")

</div>

You might also be interested in the extended ToC here  
[https://disberd.github.io/PlutoExtras.jl/stable/toc/#Extended-ToC](https://disberd.github.io/PlutoExtras.jl/stable/toc/#Extended-ToC)  
Which has some hiding cells functionality built in (disclaimer: that is my package)

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 11, 2024, 7:11pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/6 "2024-08-11T19:11:00Z")

</div>

It did not work… 😕

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [August 11, 2024, 7:18pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/7 "2024-08-11T19:18:29Z")

</div>

It might be that you need to increase specificity of the css rule.  
You can try setting `display: none !important;` if that is the issue

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 11, 2024, 7:21pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/8 "2024-08-11T19:21:10Z")

</div>

I’ve tried this. It did not work. For some reason the selector is not working

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [August 11, 2024, 7:38pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/9 "2024-08-11T19:38:32Z")

</div>

Can you share the notebook?

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [August 11, 2024, 7:40pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/10 "2024-08-11T19:40:20Z")

</div>

I typically just move those cells to the end of the notebook in a situation like this…however, try this:

Suppose the id you want to target is `74c6aa7f-0df8-4530-8d9a-38fc4096fd01`. You should be able to select it like this:

```julia
html"""
<style>
	#\37 4c6aa7f-0df8-4530-8d9a-38fc4096fd01 {
		display: none;
	}
</style>
"""

```

I don’t know why, but it only works for me if I leave that space between the first number in the id and the rest of the id.

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 11, 2024, 7:54pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/11 "2024-08-11T19:54:56Z")

</div>

It did not work. Here is the notebook  
[aula-02.jl](https://discourse.julialang.org/uploads/short-url/5C7CqkuDwyxDrNlmUy6jxtAx7mO.jl) (40.7 KB)

---

<div class="post-metadata">

**Author:** ![disberd](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@disberd](https://discourse.julialang.org/u/disberd)\
**Post date:** [August 12, 2024, 12:43pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/12 "2024-08-12T12:43:52Z")

</div>

@rgouveiamendes You had a missing `0` in the first block for the cell ids (the one highlighted in the image below).  
Adding the 0 to have a correct UUID and using the solution with the `id` attribute name works on my side (for some reason the `#\30 ID` synthax did not work for me)

![image](https://global.discourse-cdn.com/julialang/original/3X/6/a/6ab6a9dae26d7ef28b958639eaf896a12fcbbc96.png)

---

<div class="post-metadata">

**Author:** ![rgouveiamendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rgouveiamendes/32/218636_2.png) [@rgouveiamendes](https://discourse.julialang.org/u/rgouveiamendes)\
**Post date:** [August 12, 2024, 1:33pm UTC](https://discourse.julialang.org/t/hide-pluto-jl-cell-in-static-html-with-css/118057/13 "2024-08-12T13:33:55Z")

</div>

🤦‍♂️ Thanks! It’s working here too. I might have lost that zero when I switched from one syntax to the other.
