diff --git a/lxl-web/src/lib/styles/lxlquery.css b/lxl-web/src/lib/styles/lxlquery.css
index 606bd2fce..f292e349a 100644
--- a/lxl-web/src/lib/styles/lxlquery.css
+++ b/lxl-web/src/lib/styles/lxlquery.css
@@ -2,24 +2,24 @@
 	color: green;
 }
 
-.lxlq.qualifierkey {
+.lxlq.qualifier-key {
 	color: green;
 }
 
-.lxlq.qualifiervalue {
+.lxlq.qualifier-value {
 	color: green;
 }
 
-.lxlq.equaloperator,
-.lxlq.compareoperator {
+.lxlq.equal-operator,
+.lxlq.compare-operator {
 	color: darkolivegreen;
 }
 
-.lxlq.booleanoperator {
+.lxlq.boolean-operator {
 	color: #935493;
 }
 
-.lxlq.booleanquery {
+.lxlq.boolean-query {
 	color: purple;
 }
 
diff --git a/lxl-web/src/lib/utils/LxlQueryHighlight.ts b/lxl-web/src/lib/utils/LxlQueryHighlight.ts
index b9cd93156..453171eba 100644
--- a/lxl-web/src/lib/utils/LxlQueryHighlight.ts
+++ b/lxl-web/src/lib/utils/LxlQueryHighlight.ts
@@ -4,12 +4,12 @@ import { tagHighlighter } from '@lezer/highlight';
 
 const highlighter = tagHighlighter([
   { tag: t.Qualifier, class: 'qualifier' },
-  { tag: t.QualifierKey, class: 'qualifierkey' },
-  { tag: t.QualifierValue, class: 'qualifiervalue' },
-  { tag: t.EqualOperator, class: 'equaloperator' },
-  { tag: t.CompareOperator, class: 'compareoperator' },
-  { tag: t.BooleanOperator, class: 'booleanoperator' },
-  { tag: t.BooleanQuery, class: 'booleanquery' },
+  { tag: t.QualifierKey, class: 'qualifier-key' },
+  { tag: t.QualifierValue, class: 'qualifier-value' },
+  { tag: t.EqualOperator, class: 'equal-operator' },
+  { tag: t.CompareOperator, class: 'compare-operator' },
+  { tag: t.BooleanOperator, class: 'boolean-operator' },
+  { tag: t.BooleanQuery, class: 'boolean-query' },
   { tag: t.Wildcard, class: 'wildcard' }
 ], {
   all: 'lxlq',