CSS Elemente eindeutig identifizieren?

[FrazeColder]

Moin zusammen,

ich habe nun endlich mein Projekt fertig bekommen und möchte abschließend mit CSS noch ein paar Einstellungen vornehmen. Allerdings gestaltet sich das schwieriger als gedacht...

Denn ich bekomme es nicht hin, Objekte eindeutig zu identifizieren. Denn ich möchte z.B. nur genau diesen einen bestimmten Button verschieben/neu anordnen, und nicht alle Buttons, die diese ID/Klasse besitze...

Hier unten seht ihr beispielsweise mal zwei Buttons, die allerdings im Code fast genau ähnlich sind. Bis eben auf die Inhalte.
Daher weiß ich nicht, wie ich die Buttons auseinander halten soll bzw. wie ich in CSS nur den einen Button addressiere, und nicht beide Buttons...

Button 1: Button 2:

Hat jemand von euch eine Ahnung, wie ich das mache?

MfG und Vielen Dank!

 

[Bagbag]

<a id="button1" ...></a>

#button1 { width: 50% }

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_id


Ich würde den Hintergrund übrigens etwas abdunkeln:

 

[FrazeColder]

Das ist allerdings mit WordPress erstellt, bin mir nicht sicher, ob ich da IDs vergeben kann

 

[Bagbag]

Um welche Seite handelt es sich denn genau? Wenn du keine IDs vergeben kannst, kannst du du mit CSS auch den exakten Pfad selektieren und dafür mit bspw. :nth-of-type arbeiten.

 

[FrazeColder]

@Bagbag: Danke, werde ich mir mal merken.

Und meinst du mit absoluten Path XPath? - Das müsste, fehlt mir gerade ein, doch eigtl auch gehen?

 

[PERKELE]

Ich an deiner Stelle würde das komplette CSS über die Dev Tools eines Browsers überprüfen.

Da sind einige Fehler bzw. Doppelungen drin, simples Beispiel:

background-position: center center;

Einmal "center" reicht.

EDIT: Habe gerade gesehen, du nutzt Wordpress, wenn du ein Standard Theme nutzt, kannst du es via Child Theme anpassen so wie es dir gefällt.

 

[FrazeColder]

Kenne mich mit Child Themes noch nicht so gut aus. Aber habe es jetzt!

 

[PERKELE]

Na dann viel Spass basteln und fummeln, das gute an Child Themes, es überlebt Updates

 

[FrazeColder]

Ah okay, das wusste ich nicht. Aber ich habe ja nicht in den Code des Themes eingegriffen. Geht ja nur un CSS

 

[PERKELE]

Die bleibt ebenfalls erhalten.