CSS Selectors

Click a selector to see which elements in the DOM tree it matches.

Selectors

divType selector — matches all <div> elements.

/* CSS */

div {

outline: 2px solid #34d399;

}

Matched element

Not matched

DOM Tree

<sectionclass="container">

<divid="special"class="box highlight"data-type="primary">Match

div.box.highlight#special[data-type='primary']

<p>

<p> inside div — 1st child

</p>

<spanclass="highlight">

<span.highlight> inside div

</span>

<p>

<p> inside div — 3rd child

</p>

</div>

<pclass="box highlight">

<p.box.highlight> sibling after div

</p>

<divclass="box"data-type="secondary">Match

div.box[data-type='secondary']

<span>

<span> inside 2nd div

</span>

<p>

<p> inside 2nd div

</p>

</div>

<p>

<p> sibling after 2nd div

</p>

<divclass="box highlight">Match

div.box.highlight — 3rd box

<p>

<p> inside 3rd div

</p>

</div>

<p>

<p> sibling after 3rd div

</p>

<divclass="box">Match

div.box — 4th box

</div>

<p>

<p> last sibling

</p>

</section>