CSS classes
The class names on the widget's HTML that your stylesheet can rely on, and how to restyle the widget from your page.
The widget's HTML carries its own class names, starting with ls- (or ls_
for a few older ones), and state names such as light, dark or
is-active. It no longer uses utility classes from CSS frameworks, so its
names do not collide with the classes of your page, and the names below
describe what an element is, not how it looks. A few inner wrappers of the
item window still carry generic names such as w-full; they are being
replaced too.
Where your CSS applies
Your stylesheet reaches the widget with the script installation of paid plans, where the widget is part of your page. It does not reach inside the Free iframe.
The widget's own rules sit under the wc-livescore-scope class of its
container, usually with one more class (.wc-livescore-scope .ls-league-row__country). The widget adds its stylesheet when it starts,
normally after yours, so a selector of the same strength loses. Make yours one
step stronger: start at the widget element or at wc-livescore-scope and add
ls-v2-root for the views, or ls-widget-scope for windows, dialogs (such as
the date picker) and floating cards, for example:
ls-soccersapi .ls-v2-root .ls-league-row__country { letter-spacing: 0.05em; }
.wc-livescore-scope .ls-widget-scope .ls-cal-day { letter-spacing: 0.02em; }Settings that come from your configuration, such as the text case of
competition names, use !important: change those in the configurator.
Some parts set their sizes and colors in the element's own style
attribute, so that the CSS of your page cannot change them by accident. Team
names in match rows are one of them: their size, weight, color, line height
and letter spacing. Those values win over any class rule unless your rule
uses !important, for example:
.wc-livescore-scope .ls-match-row__team-name--winner { color: #0a7f3f !important; }Classes you can rely on
These names are stable. Any change to them is announced in What's new.
| Part | Classes |
|---|---|
| Widget | wc-livescore-scope (container), ls-v2-root (each view), ls-widget-scope (windows, dialogs and floating cards); light or dark on the same elements |
| Toolbar | ls-livescore-toolbar-stack, ls-toolbar-action, and per button ls-toolbar-action--search, --calendar, --favorites, --theme, --settings |
| Dates | ls-date-strip, ls-v2-day-btn, ls-date-strip-day; is-active and is-today on the selected day and today |
| Tabs | ls-tabnav-tab, with is-active on the open tab |
| Competition groups | ls-league-group, ls_league_row, ls-league-row__title, ls-league-row__country, ls-league-group__match |
| Match rows | ls-match-row-trigger (the whole row), ls_match_item_surface, ls_match_item_left, ls_match_item_right, ls-match-row__score, ls-match-row__status, ls-match-row__odds, ls-match-row__favorite-button; team names: [data-ls-team-name] in every row layout, and in the stacked rows (Default and Compact layouts) also ls-match-row__team-name, with --winner, --loser or --draw (their size, weight and color need !important, see above) |
| Links to matches, teams, competitions and players | ls-entity-trigger__link, ls-entity-link |
| Odds | ls-v2-inline-odds, ls-v2-inline-odds__cell, ls-v2-inline-odds__brand |
| Match, team, competition and player header | ls-card-band, ls-card-band__team, ls-card-band__competition, ls-card-band__status, ls-card-band__kickoff, ls-card-band__score |
| Window and dialogs | ls-modal, ls-entity-modal-content |
| Date picker | ls-cal, ls-cal-caption, ls-cal-nav, ls-cal-day, with ls-cal-day--selected, ls-cal-day--today and ls-cal-day--outside |
| Floating cards | ls-dock-rail, ls-dock-card, ls-dock-chip |
| Standings | ls-v2-standings-table |
| Lineups | ls-lineups-pitch |
| Live ticker | ls-v2-ticker, ls-v2-ticker__card |
| Offers | ls-offer, ls-offer-card, ls-offer-cta (see Offers) |
| Banners | ls-banner, ls-banner-sticky |
| Responsible-gambling notice | ls-compliance-line, ls-compliance-notice |
| Error card (domain not allowed, widget not found) | ls-widget-error, ls-widget-error__card |
The match header also carries its older ls-mh-* names, and they keep
working. For new CSS, use the names on the same elements:
| Older name | Use instead |
|---|---|
ls-mh-name | ls-card-band__team or [data-ls-team-name] |
ls-mh-league | ls-card-band__competition |
ls-mh-status | ls-card-band__status |
ls-mh-datetime | ls-card-band__kickoff or [data-ls-kickoff] |
ls-mh-score-num | [data-ls-score] |
ls-mh-tv (the broadcast button) and ls-mh-kickoff / ls-mh-time (the
kick-off time before a match starts) have no other name yet. If any ls-mh-*
name is ever removed, it will be announced in What's new
first.
Attributes you can rely on
| Attribute | On | Values |
|---|---|---|
data-ls-team-name | a team name in a match row or header | home, away |
data-ls-score | a score figure in the match header | home, away |
data-ls-kickoff | the kick-off date in the match header | the kick-off date and time, such as 2026-09-20 16:15:00 |
data-theme | the widget container and its views | light, dark |
Everything else may change
Other ls-* classes are internal and can change in any release, in
particular:
ls-v2-tk-followed by a code, which carries the design tokens of a configuration;ls-ui-*, the shared building blocks of dialogs, the date picker and pop-ups;ls-truncateandls-sr-only, small helpers for cut-off text and text for screen readers only;- names that do not start with
ls-, such as those of the icons (lucide-*) and of the date picker's buttons (rdp-*).
Your own class names
The Custom CSS classes fields of odds and banners add your own class names to those elements, for your stylesheet to use. See Monetization.