Größe des Textes eines Button ändern

[Essotiger]

Hallo!

Habe eine Jimdo-Seite und meine eigenen Buttons gestaltet.

Dazu habe ich im Head einen entsprechenen CSS-Code und dann auf der Seite ein Widget:

Head:

<style type="text/css">

.buttonXL a {
 
background: #D8D8D8;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding: 10px;
color: black;
width: 350px;
font-size: 24px;
text-align: center;
border-radius: 6px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
text-decoration: none;
text-underline: none;
transition-property: background-color;
transition-duration: 1s; }
 
.buttonXL a:hover {

background-color: #5882FA;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

} 

/*]]>*/
</style>

Widget:

<div class="buttonXL">
    <a href="[URL]https://www.ziel.at[/URL]" target="_blank" <strong><span style="color: #ff0000;">Zeile 1</span</strong><br />
    <span style="color: #0000ff;"><strong>Zeile 2</strong></span><br />
  <strong>Info &amp; Zeile 3</strong></a>
</div>

Nun möchte ich jedoch Zeile 1 in anderer Größe oder/und Größe als Zeile 2 und auch Zeile 3 sollte eventuell wieder anders sein.

Geht das?

Danke.

 

[SpiceLab]

Nun möchte ich jedoch Zeile 1 in anderer Größe oder/und Größe als Zeile 2 und auch Zeile 3 sollte eventuell wieder anders sein.

Geht das?

Mit einem vorangestellten "Wie", hätte Deine Frage schon eher den Nagel auf dem Kopf getroffen.

Es würde Dich ansonsten sicher schwer wundern, wenn dem nicht so wäre.

Die anfängliche Reihenfolge der verschachtelten <strong> u. <span>-Elemente so fortführen, und der :nth-child-Selektor kann in der HTML-Struktur seine Arbeit verrichten:

• https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-child

In meinem Fiddle hab ich anhand der Schriftfarbe die Ampelkoalition (SPD, FDP, B'90/Grünen) ins Leben gerufen

• https://jsfiddle.net/SpiceLab/e17L0km1/

• a strong:nth-child(1) {color:red}
  a strong:nth-child(3) {color:yellow}
  a strong:nth-child(5) {color:green}

 

[Essotiger]

Mit einem vorangestellten "Wie", hätte Deine Frage schon eher den Nagel auf dem Kopf getroffen.

Es würde Dich ansonsten sicher schwer wundern, wenn dem nicht so wäre.

Die anfängliche Reihenfolge der verschachtelten <strong> u. <span>-Elemente so fortführen, und der :nth-child-Selektor kann in der HTML-Struktur seine Arbeit verrichten:

• https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-child

In meinem Fiddle hab ich anhand der Schriftfarbe die Ampelkoalition (SPD, FDP, B'90/Grünen) ins Leben gerufen

• https://jsfiddle.net/SpiceLab/e17L0km1/

• a strong:nth-child(1) {color:red}
  a strong:nth-child(3) {color:yellow}
  a strong:nth-child(5) {color:green}

Danke für die Hilfe!

Das ist wohl die sauberere Lösung, danke.

Habe das nun mit verschiedenen Schriftgrößen ergänzt und so eine Lösung bekommen! :)

a strong:nth-child(1) {color:red; font-size: 48px}
a strong:nth-child(3) {color:yellow; font-size: 36px}
a strong:nth-child(5) {color:green; font-size: 30px}

Um es besser zu verstehen, würde ich gerne wissen, was die Zahlen 1, 2 , 3 in den Klammern genau bedeuten. Kannst Du mir das bitte kurz erklären.

Da ich ja immer weitere Ideen habe, stellt sich mir noch die Frage, ob ich in diesen Button auch noch eine .png Grafik integrieren könnte oder ist sowas nicht machbar?

Danke.

 

[SpiceLab]

Um es besser zu verstehen, würde ich gerne wissen, was die Zahlen 1, 2 , 3 in den Klammern genau bedeuten. Kannst Du mir das bitte kurz erklären.

Wofür habe ich Dir wohl den Link zu SELFHTML empfohlen? :(

Mithilfe des Selektors :nth-child() ist es möglich, das n-te Kind eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.

Ausgangspunkt ist das <a>-Element, um darin seine unmittelbaren Kinderelemente (<strong> u. <br>) durchzuzählen, und die ermittelten Zahlenpositionen der <strong>-Elemente in den Klammern anzugeben.

 

[Essotiger]

Sorry, dass ich es nicht gleich verstanden habe! Ist für jemanden wie mich nicht alltäglich und CSS sehr neu!
Was ich nicht verstand, dass auch die <br> gezählt werden, sondern ich dachte, dass nur innerhalb aller <strong> gezählt wird.

 

[SpiceLab]

ich dachte, dass nur innerhalb aller <strong> gezählt wird.

In diesem Fall halt nicht, weil wir <strong> als unmittelbares Kindelement von <a> auserkoren haben, es mit Hilfe von :nth-child() im Markup zu selektieren, und die differenzierten CSS-Regeln auf sie anweden zu können.

Aus der Kombination des Nachfahren- und :nth-child()-Selektors

a strong:nth-child(1) {}
a strong:nth-child(3) {}
a strong:nth-child(5) {}

geht eigentlich unmißverständlich hervor, wie hier die Eltern-/Kindrolle verteilt ist.