--- title: "CSS-Selektor eines Elements identifizieren" slug: "identify-an-elements-css-selector" updated: 2026-07-03T07:01:41Z published: 2026-07-03T07:01:41Z canonical: "support.whatfix.com/identify-an-elements-css-selector" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # CSS-Selektor eines Elements identifizieren CSS-Selektoren werden verwendet, um HTML-Elemente auf einer Webseite auszuwählen. Sie helfen Whatfix dabei, korrekt zu identifizieren, an welchem Element sich Ihr Inhalt festhalten muss. Die folgenden sind Instanzen, in denen Sie CSS-Selektoren in den Anzeigeregeln des Inhalts verwenden möchten: - Flow-Tooltips, Beacons, Smart Tips usw., am falschen Ort angezeigt wird. - Wenn Ihr Inhalt nicht angezeigt wird, weil er das richtige Element nicht finden konnte. - Wann Sie möchten, dass Ihr Inhalt schneller angezeigt wird. Die folgenden Szenarien können die Identifizierung eines CSS-Selektors eines Elements beinhalten: - [Flow läuft nicht korrekt](/studio/docs/de/flow-does-not-run-correctly) - [Flow-Tooltip flackert oder erscheint an unterschiedlicher Position](/studio/docs/de/flow-tooltip-flickers-or-appears-at-different-position) - [Flow konnte das Element für den nächsten Schritt nicht erkennen](/studio/docs/de/flow-couldnt-detect-the-element-for-the-next-step) - [Smart Tips erscheinen zufällig](/studio/docs/de/smart-tips-appear-randomly) - [Smart Tip wird an einer falschen Position angezeigt](/studio/docs/de/smart-tip-displaying-in-an-incorrect-position) --- Folgende sind einige gängige CSS-Selektoren: | CSS Selector | Beschreibung | Beispiel | Entsprechendes HTML | | --- | --- | --- | --- | | `.class` | Wählt die Elemente mit der angegebenen Klasse aus | `.navbar` | `<div class="navbar">` | | `#id` | Wählt die Elemente mit der angegebenen id aus | `#slide` | `<div id="slide">` | | `[attribute="value"]` | Wählt die Elemente aus, bei denen das angegebene Attribut dem angegebenen Wert entspricht | `[lang="en"]` | `<div lang="en">` | Für eine ausführlichere Referenz zu CSS-Selektoren, sehen Sie [CSS Selector Reference](https://www.w3schools.com/cssref/css_selectors.php). --- Verwenden Sie die folgenden Schritte, um die CSS-Selektoren eines Elements in Ihrem Browser herauszufinden: 1. Öffnen Sie die **[Entwickler-Tools](https://developer.chrome.com/docs/devtools/open)** ![debug_flow_devtools.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_flow_devtools.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D){height="" width="500"} Das Folgende ist ein Beispiel für die Angabe von 3 Klassen in einem CSS-Selektor: 2. Gehen Sie in den **Inspectormodus**. ![chrome_inspect_mode.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_inspect_mode.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D) 3. Wählen Sie das Element aus, dessen Selektoren Sie finden möchten. ![chrome_select_element_inspect.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_select_element_inspect.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D) 4. Identifizieren Sie die Selektoren des markierten Tags im **Elemente** Abschnitt des Fensters "Entwicklertools". ![chrome_highlighted_tag.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_highlighted_tag.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D) 5. Verwenden Sie einen geeigneten Selektor im [Anzeigeregeln](https://support.whatfix.com/docs/de/visibility-and-display-rule-conditions-1) Ihres Inhalts. your title goes here your title goes here Sie können CSS-Selektoren in Anzeigeregeln wie **Ausgewähltes Element ist** und **Anderes Element auf der Seite** verwenden. --- ### Wie wählt man einen guten CSS-Selector aus? Sobald Sie die CSS-Selektoren eines Elements identifizieren, müssen Sie einen Selektor oder eine Kombination von Selektoren auswählen, die Ihr ausgewähltes Element eindeutig beschreibt. Nachfolgend sind einige Tipps, um dies zu tun: - Wenn Ihr Element eine ID hat, verwenden Sie es als CSS-Selektor. Die ID eines Elements ist normalerweise eindeutig. ![debug_select_id.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_select_id.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D) - Wenn Ihr Element mehrere Klassen hat, verwenden Sie eine Kombination von ihnen in Ihren Anzeigeregeln. ![debug_multiple_classes.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_multiple_classes.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D) Note: Sie können mehrere Klassen in einem CSS-Selektor angeben, indem Sie sie miteinander verketten. Note: Geben Sie mehrere Klassen in einem CSS-Selektor an, indem Sie sie miteinander verketten. Das Folgende ist ein Beispiel für die Angabe von 3 Klassen in einem CSS-Selektor: **.klasse1.klasse2.klasse3** - Wenn Ihr Element keine eindeutigen Attribute hat, überprüfen Sie, ob ein [Elternelement](http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html) Ihr Element eindeutig identifizieren kann. Stellen Sie sicher, dass das übergeordnete Element nur das Element enthält, auf dem Sie Ihren Inhalt anzeigen möchten, andernfalls könnte Ihr Inhalt auf einem der [Geschwisterelemente](http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html) angezeigt werden. ![debug_select_parent.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_select_parent.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A42%3A44Z&se=2026-10-29T04%3A42%3A44Z&sr=c&sp=r&sig=mggwBJiGMYqT14HfvnU87PaAPo3Qb%2FySnYzdhQQeD8k%3D)