12. Styling comments and processing instructions

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 EditProcessing InstructionChange 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 pseudo-element may contain processing-instruction-target() which is replaced by the target of the processing instruction 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.