Probleme mit :first-child

JR Cologne · 29. April 2016

Hallo zusammen,

ich habe ein kleines Problem mit dem first-child-Selektor.

Und zwar möchte ich immer den ersten Artikel mit keinem border-top ausstatten. Leider funktioniert dies bisher nur über eine extra Klasse, weil der first-child-Selektor irgendwie nicht wirkt.

Der Code sieht eigentlich völlig richtig aus. Kann mir das echt nicht erklären:

CSS

main article:first-child {
      border-top: none;
}

Das HTML solltet ihr eigentlich nicht brauchen. Ist halt einfach ein Article innerhalb des Main-Containers.

Ich hoffe, irgendwer hat eine Idee, woran es liegen könnte.

Gruß
JR Cologne

MrMurphy · 29. April 2016

Hallo

Ohne den HTML-Quellcode ist der Fehler nicht ersichtlich.

Gruss

MrMurphy

JR Cologne · 29. April 2016

HTML

ï»¿<?php
    require_once('php/config.php');
    require_once('php/functions.php');
?>




<!DOCTYPE html>
<html lang="de">




<head>
  <title>Startseite - Webdesign JR</title>
  <?php require_once('includes/sections/head.php'); ?>
</head>




<body id="navMenu_open">
  <div id="wrapper">
    <!-- Header -->
    <?php include_once('includes/sections/header.php'); ?>




    <!-- Nav -->
    <?php include_once('includes/sections/nav.php'); ?>




    <main>
      <div id="heading_container">
        <h2 id="heading">News</h2>
      </div>




      <article id="art1">
        <h3>Artikel 1</h3>




        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </article>




      <article id="art2">
        <h3>Artikel 2</h3>




        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </article>




      <article id="art3">
        <h3>Artikel 3</h3>




        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </article>
    </main>
  </div>




    <!-- Footer -->
    <?php include_once('includes/sections/footer.php'); ?>
</body>
</html>

Alles anzeigen

MrMurphy · 29. April 2016

Hallo

Zitat

Ist halt einfach ein Article innerhalb des Main-Containers.

Klar. Und das div-Element hast du vergessen?

Das ist aber genau die Problemursache. Das div ist div:nth-child(1).

Durch das div gibt es keinen article:nth-child(1). Der erste article ist article:nth-child(2).

Die Anweisung ist von hinten zu lesen: Das CSS sucht bei article:nth-child(1) zunächst das 1. Kind und kontrolliert dann, ob es sich um ein article-Element handelt. Wenn nicht, werden die CSS-Anweisungen nicht ausgeführt.

Wenn du den ersten article erwischen willst, egal wie viele Elemente sich davor befinden kannst du mal article:nth-of-type(1) ausprobieren.

Gruss

MrMurphy

JR Cologne · 29. April 2016

Sorry, daran habe ich mal wieder überhaupt nicht gedacht.

Vielen Dank für deine schnelle Hilfe. Habe jetzt :first-of-type genommen. Funktioniert einwandfrei.

wolf · 1. Mai 2016

#heading_container border bottom geht nicht?
Das problem mit komplexen Selektoren ist, dass sie unperformant sein können, und im vergleich zum #ID selektor definitiv unperformant sind

JR Cologne · 1. Mai 2016

Ich verstehe gerade nicht, worüber du redest bzw. worauf du hinaus willst. Sry.

MrMurphy · 1. Mai 2016

Hallo

Zitat

Ich verstehe gerade nicht, worüber du redest bzw. worauf du hinaus willst. Sry.

Im Moment ist es etwas in Mode Selektoren wie :nth-child() schlecht zu machen.

Da es dafür keine sachlichen Gründe gibt muss man sich halt nebulös ausdrücken.

Sowas geschieht regelmäßig wenn in HTML / CSS Neuerungen eingeführt werden, die nicht von allen verstanden und angewandt werden können. Um die eigenen Unzulänglichkeiten zu verschleiern wird halt an den Neuerungen herumgenörgelt und Anderen madig gemacht.

Unter anderem werden dazu eher weltfremde Szenarien als tägliche Vorkommnisse dargestellt und die Anwendung der Neuerungen falsch beschrieben.

Webseitenersteller, die noch nicht so sattelfest sind fallen dann darauf herein und verbreiten schlimmstenfalls ohne Hintergrundwissen die Horrormeldungen weiter.

Das geschieht aktuell halt mit den Selektoren. Die sind zwar nicht für jeden möglichen Einsatzzweck sinnvoll, aber solche sinnlosen Einsatzzwecke sind eher selten. Von daher solltest du dich nicht nervös machen lassen. Für deinen aktuellen Einsatzzweck sind Selektoren besser geeignet als IDs oder Klassen.

Dass Selektoren die Zukunft gehört ist auch daran ersichtlich, dass mit CSS3 viele neue eingeführt wurden und schon viele zusätzliche in Planung sind.

Selektoren gehören auch zu dem Konzept, Inhalt und Layout zu trennen. Ähnlich wie unnütze Container sollen auch IDs und Klassen möglichst selten verwendet werden. Viele gestandene Webseitenersteller haben aber Schwierigkeiten das neue Konzept umzusetzen und auf die geliebten ID- und Klassenansammlungen zu verzichten.

Bitte nicht falsch verstehen: IDs und Klassen sind und bleiben ein Konzept von HTML und CSS. Sie sind auch nicht schlecht oder veraltet und haben ihre sinnvollen Einsatzzwecke. Allerdings gibt es viele Lösungen für die Selektoren besser geeignet sind.

Gruss

MrMurphy

JR Cologne · 1. Mai 2016

Ok, verstehe. Bin da ganz bei dir. Die neuen Selektoren sind definitiv schöne Neuerungen, die man nutzen sollte, daher wollte ich das Problem ja auch beseitigen. Hätte ja schließlich auch einfach eine Klasse nehmen können.

MrMurphy · 1. Mai 2016

Hallo

Falls du deinen ersten Beitrag noch bearbeiten darfst könntest du den Quellcode bis auf die Zeilen 450 bis 452 löschen.

Gruss

MrMurphy

JR Cologne · 1. Mai 2016

done

wolf · 1. Mai 2016

Vorab, ich bin jemand der liebend gerne neue Dinge im Web ausprobiert, dazu bin ich CSS Frak und nutze unheimlich gerne CSS Hacks und Komplexe Selektoren.

Zitat von MrMurphy

Das geschieht aktuell halt mit den Selektoren. Die sind zwar nicht für jeden möglichen Einsatzzweck sinnvoll, aber solche sinnlosen Einsatzzwecke sind eher selten. Von daher solltest du dich nicht nervös machen lassen. Für deinen aktuellen Einsatzzweck sind Selektoren besser geeignet als IDs oder Klassen.

Für seinen Einsatzzweck ist der :nth-child Selektor UNGEEIGNET wenn man sich sein Markup anschaut.
Er hat dem Element davor eine ID gegeben, also sollte man diese auch nutzen!
Wenn er diese ID allgemein nicht braucht, steht außer frage das der :*first-child Selektor genau der richtige ist.
Nicht alles neue ist besser als das Alte, vorallem wenn es sich hier um das messen von ID und Pseudo-Selektor handelt.

@ThreadOwner, wenn du die ID brauchst, versuche diese auch zu nutzen. Wenn du sie nicht brauchst, lösch sie und nutze :first-of-type.

PS: Ich bin Verweigerer von CSS Frameworks.

JR Cologne · 1. Mai 2016

Du redest von der id bei dem ersten Artikel?

Die ist nur als Anker gedacht. Ich verweise nämlich im Menü auf die Artikel und dann kann man halt dahin springen.

Außerdem macht die id keinen Sinn, da es ja später auch mal sein kann, dass Artikel hinzugefügt werden und dann ist der Artikel 1 nicht mehr an erster Stelle, sondern vielleicht Artikel 5.

wolf · 2. Mai 2016

JR Cologne · 2. Mai 2016

Die id nutze ich doch. Oder vertue ich mich da?

Oder geht es dir dabei jetzt darum, dass ich dort first-child nutzen soll?

wolf · 2. Mai 2016

Du solltest lieber die ID für die Boder benutzen als first-of-type (article) für die Boder.
Schlimm ist es nicht aber eben performanter.

JR Cologne · 2. Mai 2016

Häh? Jetzt wechselst du schon wieder das Thema. Eben ging es noch um den #heading_container, jetzt wieder um die Artikel.

Warum ich bei den Artikeln die id nicht nutze, habe ich ein bisschen weiter oben bereits erklärt und daran wird sich auch nichts ändern.

wolf · 3. Mai 2016

Zitat von JR Cologne

Und zwar möchte ich immer den ersten Artikel mit keinem border-top ausstatten. Leider funktioniert dies bisher nur über eine extra Klasse, weil der first-child-Selektor irgendwie nicht wirkt.

Okay, ich hatte gelesen du möchtest Zwischen dem Div und dem 1. Article (also dem article:first-of-type) eine Border haben, die kannst du entweder dem article oben geben oder dem Div unten .. aber da du beim 1. keine haben willst ist alles klar.

Trotz alledem bleibt, wenn du etwas hast, was der CSS pharser schneller finden kann im DOM, dann nutze dies.

JR Cologne · 3. Mai 2016

Achso, ok. Dann ist die Diskussion ja zum Glück endlich beendet.

Probleme mit :first-child

Jetzt mitmachen!

Teilen