0% found this document useful (0 votes)
37 views

Syntax: Child: Multiplication: ID and CLASS Attributes

This document provides an overview of CSS selector syntax including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, descendant selectors, child selectors, sibling selectors, and grouping. It also shows examples of common CSS selector patterns like ul lists, forms, and tables.

Uploaded by

Milos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
37 views

Syntax: Child: Multiplication: ID and CLASS Attributes

This document provides an overview of CSS selector syntax including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, descendant selectors, child selectors, sibling selectors, and grouping. It also shows examples of common CSS selector patterns like ul lists, forms, and tables.

Uploaded by

Milos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Syntax

Child:> Multiplication:* IDandCLASSattributes


nav>ul>li ul>li*5 #header
<nav> <ul> <div id="header"></div>
<ul> <li></li>
<li></li> <li></li>
</ul> <li></li> .title
</nav> <li></li> <div class="title"></div>
<li></li>
</ul>
form#search.wide
Sibling:+ <form id="search" class="wide"></form>
div+p+bq Itemnumbering:$
<div></div> p.class1.class2.class3
<p></p> ul>li.item$*5 <p class="class1 class2 class3"></p>
<blockquote></blockquote> <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li> Customattributes
Climbup:^ <li class="item4"></li>
<li class="item5"></li> p[title="Hello world"]
div+div>p>span+em^bq </ul> <p title="Hello world"></p>
<div></div>
<div>
<p><span></span><em></em></p> h$[title=item$]{Header $}*3 td[rowspan=2 colspan=3 title]
<blockquote></blockquote> <h1 title="item1">Header 1</h1> <td rowspan="2" colspan="3" title=""></td>
</div> <h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
[a='value1' b="value2"]
div+div>p>span+em^^bq <div a="value1" b="value2"></div>
<div></div> ul>li.item$$$*5
<div> <ul>
<p><span></span><em></em></p> <li class="item001"></li>
</div> <li class="item002"></li> Text:{}
<blockquote></blockquote> <li class="item003"></li>
<li class="item004"></li> a{Click me}
<li class="item005"></li> <a href="">Click me</a>
</ul>
Grouping:()
p>{Click }+a{here}+{ to continue}
div>(header>ul>li*2>a)+footer>p ul>li.item$@-*5 <p>Click <a href="">here</a> to continue</p>
<div> <ul>
<header> <li class="item5"></li>
<ul> <li class="item4"></li>
<li><a href=""></a></li> <li class="item3"></li> Implicittagnames
<li><a href=""></a></li> <li class="item2"></li>
</ul> <li class="item1"></li> .class
</header> </ul> <div class="class"></div>
<footer>
<p></p>
</footer> ul>li.item$@3*5 em>.class
</div> <ul> <em><span class="class"></span></em>
<li class="item3"></li>
<li class="item4"></li>
(div>dl>(dt+dd)*3)+footer>p <li class="item5"></li> ul>.class
<div> <li class="item6"></li> <ul>
<dl> <li class="item7"></li> <li class="class"></li>
<dt></dt> </ul> </ul>
<dd></dd>
<dt></dt>
<dd></dd> table>.row>.col
<dt></dt> <table>
<dd></dd> <tr class="row">
</dl> <td class="col"></td>
</div> </tr>
<footer> </table>
<p></p>
</footer>

You might also like