Möglichkeiten für ein CSS :: inneres Pseudo-Element

Question

CSS2 hat die ::before und ::after Pseudo-Elemente, die Stylesheets ermöglicht, Dokumente auf Weisen zu ändern, die vorher das Hinzufügen zusätzlicher nicht-semantischer Elemente zu einer Seite als "style-hooks" erfordern würden .

Ich war überrascht, dass CSS3 kein ::inner oder ::outer Pseudo-Element hinzugefügt hat, die noch mehr Fälle von HTML „Divitis“ beseitigen würde - wenn Seiten viele <div class="wrapper"> Elemente enthalten, rein als Stil-Haken mit Null semantischem Wert. CSS3 Unterstützung für mehrere Hintergrundbilder und Steigungen pro Box hilft,

Eine aktuelle Situation dieses Markup beteiligt: ​​

<div> 
    <img src="foo.jpg" /> 

    <h3>Heading</h3> 
    <p>Lorem ipsum</p> 
    <p>Dolor sit amet</p> 
</div> 

<!-- followed by the same markup template (with a different img src and paragraph text) repeated several times --> 

Die visuelle Seite Design genannt für das <img /> Element an der Seite positioniert oder schwebte werden (innerhalb der . Einschränkungen der <div>, die die Dokumentbreite gefüllt, und der Text und Überschrift einen dicken Rahmen um sie herum haben sollten, aber nicht das Bild

Idealerweise mit einem hypothetischen ::inner Elemente, das wie so gelöst werden könnte:

div { 
    display: block; 
    background: white; 
    position: relative; 
} 
div::nth-of-type(odd) { background: #FEFEFE; } 

div > img { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
div::nth-of-type(odd) > img { 
    left: auto; 
    right: 0; 
} 

div::inner { 
    border: 5px solid #CECECE; 
    max-width: 20em; 
} 

Ich hatte jedoch auf das Hinzufügen eines Hüllenelement zu regeln:

<div> 
    <img src="foo.jpg" /> 

    <div> 
     <h3>Heading</h3> 
     <p>Lorem ipsum</p> 
     <p>Dolor sit amet</p> 
    </div> 
</div> 

(mit dem div::inner Selektor mit div > div ersetzt).

Ich glaube, dies mit Polyfill.js getan werden könnte „::inner“ und „::outer“ Selektoren zu handhaben durch querySelectorAll für die gezielte Elemente laufen und jeweils deren Inhalt Einwickeln oder die Elemente selbst, und Anwenden der Eigenschaften auf diese neuen Elemente . Ich frage mich, ob jemand dies bereits erreicht hat, oder ob irgendein Browser diese Funktionalität bereits als proprietäre Erweiterung unterstützt - wie IE mehrere ::before und ::after Pseudo-Elemente unter Verwendung der ::before(n) Syntax unterstützt.

Answer 1

Das Problem, das Sie beschreiben, kann mit calc(...) und einem schwebenden Bild gelöst werden, siehe Demo hier: http://codepen.io/askl/pen/zBRbJB.

div { 
    border: 5px solid #CECECE; 
    width: calc(100% - 120px); 
    overflow: visible; 
} 

div > img:first-child { 
    float: right; 
    margin-right: -110px; 
    margin-top: -5px; 
} 

Wie im Kommentar des LGSon festgestellt wird, ist es nicht ganz klar, wie ein :inner Pseudoelement in diesem Problem helfen würde. Ich stimme jedoch zu, dass es in der Praxis Fälle gibt, in denen solche Pseudo-Elemente nützlich wären. Kann flexbox ist Teil einer Antwort sein; Allerdings konnte ich Ihr Problem damit nicht lösen, ein Ansatz mit einfachen Breiten und Floaten scheint wesentlich einfacher zu sein.