12. Styling comments and processing instructions

12. Styling comments and processing instructions
	Chapter 4. Other extensions

The construct used for styling comments and processing instructions is similar to the standard construct used for styling the first line or the first letter of an element. Examples:

*:comment {
    background-color: yellow;
    display: block;
}

*:processing-instruction {
    background-color: green;
    display: block;
}

section > *:processing-instruction {
    content: icon(left-half-disc) processing-instruction-target() icon(right-half-disc);
    display: block;
}

para:processing-instruction(php) {
    color: red;
    display: inline;
}

Rule #1

specifies that comments are formatted as blocks with a yellow background.

The values allowed for the display property of comment and processing instruction pseudo-elements are: inline, block, inline-block.

Rule #2

specifies that processing instructions are formatted as blocks with a green background.

Note that the target of the processing instruction is treated like a pseudo-attribute (editable using Edit → Processing Instruction → Change Processing Instruction Target) and is not considered to be part of its textual content.

Rule #3

specifies that processing instructions which are contained in direct children of section have replaced content.

Comments and processing instructions may have replaced content but not generated content (:before, :after).

The replaced content of a processing instruction may contain processing-instruction-target() which is replaced by the target of the processing instruction subject of the rule.

Similarly the replaced content of a comment or a processing instruction may contain text-content() which is replaced by the text of the text node subject of the rule.

Rule #4

matches processing instructions with target "php" contained in para elements.

Rendering of comments and processing instructions in a DocBook article using the above style sheet:

Note that it is also possible to use CSS3-like syntax ::comment and ::processing-instruction instead of CSS2-like syntax :comment and :processing-instruction.


11. Collapsible blocks and tables		13. Styling element attributes