Hosting Solutions
mobile_logo Table of Contents

Standard Selectors

Learn to use the standard selectors of CSS. These selectors are not part of any pseudo selector or combinator group, and they serve as the basis for all other selectors. In this video we demonstrate the universal selector, type selector, class selector, id selector and compound selections. * - universal <style> p > * { color: orange; } </style> <p>Paragraph <b>content</b> ...</p> <p><u>Paragraph</u> content ...</p> e - type <style> h2 { color: skyblue; } p { color: pink; } </style> <h2>Some Stuff</h2> <p>Stuff inside my paragraph...</p> <h2>More Stuff</h2> <p>Stuff inside my paragraph...</p> e, e, e - compound <style> input, textarea, select { display: block; margin: 10px 0px; background: #FFF0D2; padding: 7px; width: 240px; border: tan 1px solid; border-radius: 3px; } </style> <input name="firstname" placeholder="First Name" required> <input name="lastname" placeholder="Last Name"> <select name="country"> <option value="USA">USA</option> <option value="Canada">Canada</option> <option value="Mexico">Mexico</option> </select> <textarea name="bio" placeholder="Describe yourself"></textarea> .class - class <style> .class1 { background: aqua; } </style> <div class="class1">content ...</div> <p>content ...</p> <div>content ...</div> <p class="class1">content ...</p> p.class1 { } #id - id <style> #ad1 { width: 768px; height: 120px; background: #CCC; margin: 0px auto; } </style> <div id="ad1"></div> div#ad1 { }

CSS Videos

Element Selection

Standard SelectorsCombinator SelectorsStructural Selectorsnth Structural SelectorsUI Element States SelectorsUser Action SelectorsLink and Anchor SelectorsNegation and Language SelectorsPseudo Element SelectorsAttribute Selectors