[CSS] :first-child Problem

Dieses Thema im Forum "Webdesign" wurde erstellt von StrikeFreedom, 13. April 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 13. April 2009
    :first-child Problem

    Bie mir will :first-child einfach nicht funktionieren. Ich finde einfach nicht den Fehler.

    Es geht um "#content h2". Das erste h2 Element soll oben rechts eine runde kante von 14px haben. Diese wird aber bei allen h2 Elementen im #content angezeigt.

    HTML
    Spoiler
    HTML:
    <div id="content">
     
     
    <div class="mod_article block" id="startseite">
    
    <!-- indexer::stop -->
    <div class="mod_newslist block">
    
    <div class="layout_full block first even">
    
    <h2>***</h2>
    
    <p class="info">***</p>
    <h3>***</h3>
    
    <div class="ce_text">
    <div class="image_container">
    <a href="**.html"><img style="margin: 5px; float: right;" src="***.jpg" alt="***" width="270" height="180" /></a>
    </div>
    <p>***</p>
    <p><a href="***" target="_self">***</a></p></div>
    
    </div>
    
    <div class="layout_full block last odd">
    
    <h2>***</h2>
    
    <p class="info">***</p>
    
    <div class="ce_text">
    <p>***</p>
    </div>
    
    </div>
    
    
    CSS
    Spoiler
    Code:
    /* Style CSS */
    
    #content {
     float:right;
     padding-right:5px;
     padding-bottom:10px;
     width:610px;
     color:#fff;
    }
    
    #content h2 {
     margin-top:5px;
     padding-top:5px;
     padding-left:10px;
     padding-bottom:5px;
     margin-bottom:5px;
     font-size:12px;
     font-weight:900;
     color:#FFF;
     background-image:url(navheader.gif);
    }
    
    #content h2:first-child {
     -moz-border-radius-topright:14px;
     -webkit-border-top-right-radius:14px;
    }
    
    .block div h2 {
     margin:0px;
     padding:0px;
     font-size:12px;
     font-weight:900;
     background-image:none;
    }
    
    #content h3 {
     margin-top:10px;
     padding-left:10px;
     padding-bottom:5px;
     margin-bottom:5px;
     font-size:12px;
     font-weight:900;
     color:#007a9f;
    }
    
    #content p {
     margin-left:10px;
     font-size:11px;
     line-height:16px;
    }
    
    #content a {
     color:#2ca1be;
     font-size:10px;
     text-decoration:none;
    }
    
    #content a:hover {
     text-decoration:underline;
    }
    
    #content ul {
     margin:10px;
     margin-left:25px;
    }
    
    
    .info {
     font-style:italic;
     color:#CCC;
    }
    
     
  2. 13. April 2009
    AW: :first-child Problem

    Warum verwendest du first-child (first-child: Das erste Kind eines Elements: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets) gibt doch echt bessere Methode, bzw. was versuchst du genau zu erreichen? Werde aus deinem Post nicht schlau.
     
  3. 13. April 2009
    AW: :first-child Problem

    Hier mal etwas deutlicher beschrieben.

    Das erste h2-Tag in #content, soll oben rechts eine abgerundete kante haben.
    Das versuche ich so:
    Code:
    #content h2:first-child {
     -moz-border-radius-topright:14px;
     -webkit-border-top-right-radius:14px;
    }
    
    Die nachfolgenden h2-Tags sollen keine abgerundeten kanten haben.

    Das Problem:

    Alle h2-Tags in #content haben abgerundete Kanten.

    Einfacher?

    Ich kann den h2-Tags keine Klasse zuweisen oder direkt css zuweise.
     
  4. 17. April 2009
    AW: :first-child Problem

    Die first-child Pseudoklasse funktioniert nicht in dem Sinne, wie du es versucht hast. Dein Selektor würde nur greifen, wenn dein H2-Tag tatsächlich das aller erste Element innerhalb des Content-Divs wär.

    Hier ein Beispiel:
    Spoiler
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
     <head profile="http://gmpg.org/xfn/11">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <style type="text/css">
     
     body { background:#000; color:#fff; }
     #content h2 { background:#ff0000; color:#fff; padding:10px; }
     #content h2:first-child { -moz-border-radius-topright:10px; }
     
     </style>
     </head>
     <body>
     <div id="content">
     <h2>Erste Headline</h2>
     <h2>Zweite Headline</h2>
     </div>
     </body>
    </html>
    

    Erzeugt folgende (funktionierende) Ausgabe im Firefox:
    Spoiler
    {bild-down: http://img2.pict.com/52/51/21/b38496996de289c8d73d32c5d4/6Zp8B/css.png}

    Wenn du jetzt im Markup vor das erste H2-Tag irgendein anderes Tag setzt, geht der Selektor schon nicht mehr. Hier mit einem H1-Tag voran:
    Spoiler
    {bild-down: http://img2.pict.com/a3/73/e9/05786c61839f6768fbc8681d3b/ozPPO/css.png}

    Somit bleiben dir noch folgende Möglichkeiten:
    • Versuche, das erste H2-Tag wirklich als erstes Element innerhalb des Containers zu platzieren
    • Wenn dein H2-Tag das Einzige in der Hierarchieebene ist, kannst du den Selektor auch wie folgt schreiben: #content > h2 { -moz-border-radius-topright:10px; }. Damit greifst du auf alle H2-Tags zu, die direkte Nachfolgen von #content sind.

    Eine Info noch: die -moz(/-webkit)-border-Befehle sind nicht valide. Im Optimalfall solltest du darauf verzichten .

    MFG Chronos

    EDIT: Noch eine Info: Sowohl der :first-child, als auch der > Selektor sind erst ab CSS 2 in den Browsern verfügbar. Somit fallen die alten IEs (<= IE 6) und sonstige ältere Browser hinten über.
     
  5. 17. April 2009
    AW: :first-child Problem

    Vielen Dank,

    du hast mir echt sehr weitergeholfen.

    Ich habe jetzt das Template der seite so geändert das das erste h2 tag wirklich das erste tag im #content ist.

    Ich weiß das -moz und -webkit nicht valide sind, aber ich hatte einfach keine Lust das mit Bilder zu machen.

    Und ohne Runde kanten sieht es auch pasabel aus.

    Also nochmal Danke!

    ~[CLOSE]~
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.