Parent & Child 01

Versuche mit einfachen Eltern und Kindern Elementen

by juErik

HTML

<section class="content">content (great-grandparent)
  <div style="width:500px;">div (grandparent)
    <ul>ul (direct parent) Ebene 0  
      <li>li (child)
        <div>div (grandchild)  
            <span>span (great-grandchild)</span>
            <span>span (great-grandchild)</span>
        </div>
      </li>
      <li>li (child)
        <span>span (grandchild)</span>
        <span>span (grandchild)</span>
      </li>
    </ul>   
  </div>
</section>

CSS

.content *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

JavaScript

/* Mit farbigen Rahmen lassen sich sehr gut die Verwandschaftlichen Verhältnisse beschreiben. */  
  $("ul").children().css({"color":"red","border":"2px solid red"});
  $("li").children().css({"color":"SteelBlue","border":"2px solid SteelBlue"});

/* In der Praxis sieht es aber oft anders aus, da sich einige Eigenschaften überdecken, so wie am nachfolgend Beispiel "background". */
  //$("ul").children().css({"background":"yellow"}); // einzeln dazu schalten
  //$("li").children().css({"background":"yellow"}); // einzeln dazu schalten