Class Names

If you use, { add_classes: true }, then the following classes are attached to various elements:

abcjs-annotationText added with the "^..." format.
abcjs-authorThe author text
abcjs-barThe bar lines.
abcjs-bar-numberThe bar numbers.
abcjs-beam-elemThe beams connecting eighth notes together.
abcjs-braceThe brace on the left side of the staff (like for piano music.)
abcjs-bracketThe bracket on the left side of the staff.
abcjs-chordThe chord symbols, specified in quotes.
abcjs-clefAll clefs
abcjs-composerThe composer text
abcjs-d0-25, etc.The duration of the note. (Replace the dash with a decimal point. That is, the example is a duration of 0.25, or a quarter note.)
abcjs-decorationEverything to do with the extra symbols, like crescendo.
abcjs-defined-textText that appears between the lines of music, created with %%text.
abcjs-dynamicsThe dynamics markings: p for instance. Also the crescendo mark.
abcjs-end-m0-n0Added to slurs to indicate the ending note.
abcjs-endingThe line and decoration for the 1st and 2nd ending.
abcjs-key-signatureAll key signatures
abcjs-l0, abcjs-l1, etc.(lower case L, followed by a number) The staff line number, starting at zero.
abcjs-ledgerledger line.
abcjs-lyricThe lyric line.
abcjs-m0, abcjs-m1, etc.The measure count from the START OF THE LINE.
abcjs-mm0, abcjs-mm1, etc.The measure count from the START OF THE TUNE.
abcjs-meta-bottomEverything that is printed after all the music.
abcjs-meta-topEverything that is printed before the first staff line.
abcjs-n0, abcjs-n1, etc.The note count from the START OF THE MEASURE.
abcjs-noteEverything to do with a note.
abcjs-note_selectedThis is the element that the user has clicked on.
abcjs-p-1, abcjs-p1, etc.The y-position of the note (where middle-C is zero).
abcjs-partEach part marking in the music itself.
abcjs-part-orderThe part order indicator at the top.
abcjs-restEverything to do with a rest.
abcjs-rhythmThe rhythm text.
abcjs-slurSlurs and ties. (backwards compatible)
abcjs-start-m0-n0Added to slurs to indicate the beginning note.
abcjs-legatoSlur. Because "abcjs-slur" was historically used to indicate either a slur or a tie this indicates only a slur.
abcjs-staffThe horizontal lines that make up the staff.
abcjs-staff-extraClefs, key signatures, time signatures.
abcjs-subtitleThe subtitle, both on the top and inserted in the middle
abcjs-symbolAny special symbol, like a trill.
abcjs-tempoThe tempo marking.
abcjs-textExtra text that is not part of the music.
abcjs-time-signatureAll time signatures
abcjs-titleThe line specified by T:
abcjs-top-lineThis marks the top line of each staff. This is useful if you are trying to find where on the page the music has been drawn.
abcjs-top-of-systemThis marks the top of each set of staves. This is useful if you are trying to find where on the page the music has been drawn.
abcjs-tripletThe extra markings that indicate a triplet. (But not the notes themselves.)
abcjs-unaligned-wordsLyrics at the bottom that aren't lined up with notes.
abcjs-v0, abcjs-v1, etc.the voice number, starting at zero.

Test Tune

Paste in any ABC you want here and see how that affects the classes below:

Found Classes

Select the following classes to see what they point to. (They are ANDed together.)

CSS Possibilities

changing colors

If you want to just change everything to one other color, you can do something like:

    svg {
        fill: pink;
        stroke: pink;

If you want more control, you can use the classes. For instance, to turn only the horizontal staff lines pink, do this instead:

    svg .abcjs-staff {
        fill: pink;
        stroke: pink;
Last Updated: 12/1/2020, 7:15:05 PM
Contributors: Paul Rosen