# \[A/B-Testing\] Ändern der übergeordneten CSS-Klasse basierend auf der Experimentvariable

**URL:** <https://meta.discourse.org/t/a-b-testing-changing-parent-css-class-based-on-experiment-variable/196501>\
**Category:** Development\
**Created:** [8. Juli 2021 um 19:58 UTC](https://meta.discourse.org/t/a-b-testing-changing-parent-css-class-based-on-experiment-variable/196501 "2021-07-08T19:58:55Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [15. Juli 2021 um 15:35 UTC](https://meta.discourse.org/t/a-b-testing-changing-parent-css-class-based-on-experiment-variable/196501/2 "2021-07-15T15:35:12Z")

</div>

> [@daniyal](#):
>
> `const user_id = api.getCurrentUser().id`

Beachten Sie, dass dies bei nicht angemeldeten Benutzern wahrscheinlich zu einem nicht abgefangenen Fehler führt. Ich empfehle, dies wie folgt zu ändern:

```javascript
const user = api.getCurrentUser();
if (!user) return;

const userId = user.id;

```

Nachdem das geklärt ist, kommen wir zurück zu Ihrer Frage.

> [@daniyal](#):
>
> Wie können wir unterschiedliche Stile auf verschiedene Vorlagen anwenden, da diese denselben übergeordneten Klassennamen teilen?

Im Gegensatz zu CSS unterstützt SCSS einen [Eltern-Selektor](https://sass-lang.com/documentation/style-rules/parent-selector), den Sie verwenden können.

Da Sie dies auf jeden zweiten Benutzer anwenden möchten (id % 2),

können Sie dies beim Laden der App überprüfen. Also etwas wie dies ganz oben:

```javascript
const user = api.getCurrentUser();
const userId = user.id;

if (!userId) return;

const testThemeUser = userId % 2 === 0;

if (testThemeUser) {
  document.body.classList.add("test-theme");
}

```

Anschließend können Sie `testThemeUser` in Ihren JS-Bedingungen und die CSS-Klasse `test-theme` in Ihren Styles verwenden.

Also etwas wie dies.

JS

```javascript
let template = findRawTemplate("list/custom-topic-list-item");
if (testThemeUser)
  template = findRawTemplate("list/variant-custom-topic-list-item");
if (template) {
  this.set("topicListItemContents", template(this).htmlSafe());
}

```

SCSS

```scss
.topic-list {
  tbody {
    border: none;
  }
  tr {
    border: none;
  }
  .example-div {
    border: none;
  }
  // test-theme SCSS
  .test-theme & {
    .example-div {
      border: 2px solid black;
    }
    .another-example-div {
      font-size: 10px;
    }
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/a-b-testing-changing-parent-css-class-based-on-experiment-variable/196501)._