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 { }