I’m trying to generate web pages from markdown files. This example produces the desired visual presentation of a web page:
header.html
<!DOCTYPE html>
<html>
<head>
<style>
code {
display: block;
white-space: pre;
padding: 20px;
line-height: 125%;
background: #eee;
border: 1px solid #ccc;
margin: 1em 0;
}
p:nth-of-type(1) code {
display: inline-block;
padding: 0;
color: red;
}
</style>
</head>
<body>
body.md
Assuming you have the IP `1.1.1.1` or `2.2.2.2`, then execute the following:
```
echo "hello world";
echo "another command here";
echo "you are done";
```
footer.html
</body>
</html>
When I run the commands:
apt-get install markdown;
markdown body.md > body.html;
cat header.html body.html footer.html > index.html;
I see this in my web browser:
This is exactly what I want to see!
However, I want to delete the p:nth-of-type(1) code rule because I do not want to write custom CSS selectors to target every single inline <code> block. I have thousands of pages of markdown documents to convert to html. Manually going through page by page to pick out which <code> block is inline and which is a block level element is too time consuming.
Is there an easier way to either
a) write a CSS selector that targets p>code if and only if the p has one and only one child element and that one child element is of element type code
or b) a way to tell the markdown command to add a css class to <code> element
or c) something completely different to let me write a generic css rule to target inline code elements vs block level code elements?
>Solution :
a) write a CSS selector that targets p>code if and only if the p has one and only one child element and that one child element is of element type code
What you are looking for is the pseudo-class :only-child
Your desired selector is simply p > code:only-child.