HTML
<p>Lorem ipsum dolar</p>
<div>
<p>Lorem ipsum dolar</p>
<p>dolar ipsum Lorem</p>
</div> CSS
p {
color: green;
font-size: 28px;
} The Element Selector is the most common type of selector. A element with CSS rules will have those rules applied for all other elements of the same type.
For example, the code above modifies all P elements in the div, and outside the div.
HTML
<p id="myParagraph">
...
</p> CSS
#myParagraph {
font-size: 24px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} The ID Selector selects a element with a id attribute with a certain value.
For example, within the code above, the p element has the id named "myParagraph". Within CSS, we can reference this specific ID using the hashtag (#) sign, followed by the name and rules. Note that any element with the same ID will have rules applied as well.
HTML
<div class="container">
...
</div>
<nav class="container">
...
</nav> CSS
.container {
margin: 16px 12px;
}
nav.container {
width: 100%; height: 50px;
background-color: blue;
} The Class Selector selects a element with a class attribute with a certain value. This selector is near identical to the ID selector, but is called using the period (.) symbol within CSS. A class selector can select a specific element type that has that class applied, and only effect that element type.
For example, the code above shows the basic usage like the ID selector, but when setting rules for nav.container, this will only apply to nav's with the class "container".
HTML
<div>
<a href="https://www.google.com/">Google</a>
</div> CSS
a[href] {
text-decoraction: none;
color: white;
} The Attribute Type Selector will select a specified element type that has a certain attribute declared.
For example, the code above shows that the anchor element within the div element has an href attribute. Within CSS, we can make any anchor element with the href attribute apply these rules.
HTML
<div>
<a href="https://www.google.com/">Google</a>
</div>
<div>
<a href="https://www.apple.com/">Apple</a>
</div> CSS
a[href="https://www.google.com/"] {
text-decoraction: none;
color: white;
} The Attribute Type and Value Selector will select a specified element that has a certain attribute declared and a value equal to a certain value.
For example, the code above shows 2 div elements, both containing an anchor element with href attributes, but each href attribute has a different value. Within CSS, the rule declared will only effect elements with the attribute href equal to google.com.
HTML
<div>
<a href="https://www.google.com/">Google</a>
</div>
<div>
<a href="https://www.apple.com/">Apple</a>
</div> CSS
a[href*="apple"] {
text-decoraction: none;
color: silver;
font-size: 28px;
} The Attribute Type and Substring Selector will select a specified element that has a specific attribute with a string anywhere within the value declared.
For example, the code above is similar to the Attribute Type and Value Selector, however, you may notice that within CSS, the href has an asterisk (*) after it and before the equal sign. This means it will look for any anchor element with an href attribute that has the word "apple" within the attribute's value and apply the CSS rules.
HTML
<div>
<a href="aaugard.ninetyfive.dev/">Check my website!</a>
</div>
<div>
<a href="ninetyfive.dev/cis295/">Check out the class!</a>
</div> CSS
a[href^="aaugard"] {
text-decoraction: none;
color: silver;
background-color: green;
padding: 8px;
border: 2px solid black;
} The Beings with attribute selector selects only elements where the attribute value's begins with a certain value or phrase.
For example, the code above has 2 div elements, both containing a anchor tag. To edit every anchor tag with a href that begins with "aaugard", I can apply the rule stated in the code to only effect that element. This can be useful for when you want to only effect one element without using IDs or classes.
HTML
<div>
<a href="https://www.microsoft.com/">Microsoft</a>
</div>
<div>
<a href="https://www.x.com/">X</a>
</div> CSS
a:not(:first-child) {
color: pink;
font-weight: bold;
} The Not selector is used mostly in conjuction with other selectors or rules. Its job is to do the opposite of what is inside it wants to do.
For example, the code above has 2 div elements, both contain a anchor tag. In the CSS rules, the rule selects everything but the first-child and applies the rules. This can extremely useful when you want the inverse of a selector.
HTML
<div>
<a href="https://www.youtube.com/">YouTube</a>
</div> CSS
div {
width: 100%; height: auto;
background-color: gray;
& > a {
text-decoraction: none;
color: white;
font-size: 28px;
&:hover {
color: green;
text-decoraction: underline;
}
}
} The Nested selector applies CSS rules inside another declared CSS rule.
For example, the code above shows a div element with a anchor tag inside. In the declared CSS rule for the div, there is another rule declared inside the div rule, which effects the anchor tag, then the hover effect on the anchor tag. Think of each ampersand (&) as a new rule. This can be helpful in compacting your CSS file's line count, or for reading.
HTML
<div>
<a href="https://www.cocc.edu/">COCC</a>
</div> CSS
a:hover {
color: limegreen;
cursor: crosshair;
} The Hover selector is one the most common used selectors aside from the basics. The hover selector will activate any time a element is hovered.
For example, the code above shows a anchor tag that leads to COCC. When the user goes to hover and click this link, the anchor element will change color and the cursor. This is useful in many different areas, such as drop down menus, or something simple like this.
HTML
<form>
<label><input name="checkbox1" type="checkbox">Box</label>
</form> CSS
input:checked {
outline: 2px solid green;
} The Checked selector is specific to form inputs like radio and checkbox types. This selector activates when a radio or checkbox is clicked and selected.
For example, the code above has a basic form and a checkbox. When the checkbox is checked, the rules declared in CSS will apply. This can be useful for changing the look of a radio or checkbox when checked.
HTML
<div id="myDiv">
...
</div>
<a href="#myDiv">Click me!</a> CSS
#myDiv:target {
border: 4px solid red;
box-shadow: 2px 2px 16px red;
} The Target selector will activate when a ID selector is within the URL.
For example, the code above shows a div element with the ID "myDiv". There is also a anchor tag that directs to the ID when clicked. When the anchor tag is clicked, the target element is activated, and the CSS rules apply. This is useful for when you may want to highlight something on click.