Skip to content

Instantly share code, notes, and snippets.

@detkno90
Created May 9, 2022
Embed
What would you like to do?
Cheatsheet for codecademy project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<head>
<title>CSS Selectors</title>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>Variant of CSS selectors</h1>
</header>
<main>
<table>
<thead>
<tr>
<th>Selector</th>
<th>Example</th>
<th>Example Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="itali">.class</td>
<td>.artic</td>
<td>Selects all elements with <span>class="artic"</span></td>
</tr>
<tr>
<td class="itali">.class1.class2</td>
<td>.name1.name2</td>
<td>Selects all elements with both <span>name1</span> and <span>name2</span> set
within its class attribute</td>
</tr>
<tr>
<td class="itali">#id</td>
<td class="notranslate">#firstname</td>
<td>Selects the element with <span>id=&quot;firstname&quot;</span></td>
</tr>
<tr>
<td class="itali">*</td>
<td>*</td>
<td><span>Selects all elements</span></td>
</tr>
<tr>
<td class="itali">element</td>
<td>p</td>
<td>Selects all <span>&lt;p&gt;</span> elements</td>
</tr>
<tr>
<td class="itali">element.class</td>
<td>p.intro</td>
<td>Selects all <span>&lt;p&gt;</span> elements with <span>class=&quot;intro&quot;</span></td>
</tr>
<tr>
<td class="itali">element,element</td>
<td>div, p</td>
<td>Selects all <span>&lt;div&gt;</span> elements and all <span>&lt;p&gt;</span> elements</td>
</tr>
<tr>
<td class="itali">element element</td>
<td>div p</td>
<td>Selects all <span>&lt;p&gt;</span> elements inside <span>&lt;div&gt;</span> elements</td>
</tr>
<tr>
<td class="itali">element&gt;element</td>
<td>div &gt; p</td>
<td>Selects all <span>&lt;p&gt;</span> elements where the parent is a <span>&lt;div&gt;</span> element</td>
</tr>
<tr>
<td class="itali">element+element</td>
<td>div + p</td>
<td>Selects all <span>&lt;p&gt;</span> elements that are placed immediately after <span>&lt;div&gt;</span> elements</td>
</tr>
<tr>
<td class="itali">element1~element2</td>
<td>p ~ ul</td>
<td>Selects every <span>&lt;ul&gt;</span> element that are preceded by a <span>&lt;p&gt;</span> element</td>
</tr>
<tr>
<td class="itali">[attribute]</td>
<td>[target]</td>
<td>Selects <span>all</span> elements with a <span>target attribute</span></td>
</tr>
<tr>
<td class="itali">[attribute=value]</td>
<td>[target=_blank]</td>
<td>Selects all elements with <span>target=&quot;_blank&quot;</span></td>
</tr>
<tr>
<td class="itali">[attribute~=value]</td>
<td>[title~=flower]</td>
<td>Selects all elements with a title attribute containing the word <span>&quot;flower&quot;</span></td>
</tr>
</tbody>
</table>
</main>
<footer>
<p class="foot">this is some examples of selectors</p>
<p class="continue">more can be made soon</p>
</footer>
</body>
</html>
body {
background-color: azure;
}
h1 {
text-align: center;
font-family: Monospace;
}
table {
text-align: center;
border: 2px solid grey;
border-collapse: collapse;
background-color: PowderBlue;
color: black;
font-size: 20px;
}
th, td {
border: 2px solid black;
}
th {
background-color: #80dfff;
color: black;
font-size: 20px;
font-family: Helvectica;
}
.itali{
font-style: italic;
}
span{
font-weight: bold;
font-size: 22px;
color:red;
}
.foot {
font-size: 20px;
font-family: Monospace;
color: black;
text-align: center;
}
.continue {
text-align: center;
font-family: Monospace;
}
table {
position: static;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment