Add ID or Class to Markdown-element

Question

Is it possible to add an id or class to a (multi)markdown element?

For example a table, a paragraph or block of code?

I would like to style a table with css but non of following work:

[captionid][This is the caption, not the table id]
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[captionid][This is the caption, not the table id]

---

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[tablecaption](#tableid)

---

<div class="special_table">

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

</div>

Can't find anything else online..

I dont mean github or stackoverflow flavored markdown btw.

Answer 1

For CSS purposes you could add an id to the previous element and then use a selector to alter the following element.

Markdown like this:

<div class="special_table"></div>

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

CSS like this:

div.special_table + table tr:nth-child(even) {background: #922}

Answer 2

You can add a custom class or id to an element by putting the class or id inside a curly bracket after the element like this: {#id .class}

For example:

[Read more](http://www.stackoverflow.com "read more"){#link-sf .btn-read-more}

will be rendered like below:

<a href="http://www.stackoverflow.com" title="read more" id="link-sf" class="btn-read-more">Read more</a>

You can refer to https://michelf.ca/projects/php-markdown/extra/#spe-attr