child Combinator
CSS child Combinator reference
The CSS child combinator ( X > Y { } ) is used to target and style specific elements that are nested children of other specific elements.
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
div > .p1 {
border-bottom: #09F 1px dashed;
}
</style>
<div>
<h3>Some Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p class="p1">Content inside my paragraph...</p>
</div>
<div>
<h3>More Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p>Content inside my paragraph...</p>
</div>
<style type="text/css">
div > .p1 {
border-bottom: #09F 1px dashed;
}
</style>
<div>
<h3>Some Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p class="p1">Content inside my paragraph...</p>
</div>
<div>
<h3>More Content</h3>
<p class="p1">Content inside my paragraph...</p>
<p>Content inside my paragraph...</p>
</div>
Some Content
Content inside my paragraph...
Content inside my paragraph...
More Content
Content inside my paragraph...
Content inside my paragraph...
0 Response to "child Combinator"
Post a Comment