# Classes

# Class Names

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

classdescription
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-tieTie.
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-stem
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:

<style>
    svg {
        fill: pink;
        stroke: pink;
    }
<style>
1
2
3
4
5
6

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

<style>
    svg .abcjs-staff {
        fill: pink;
        stroke: pink;
    }
<style>
1
2
3
4
5
6
Last Updated: 12/1/2020, 7:15:05 PM
Contributors: Paul Rosen