8000 adding templates html · kawsarlog/CSS-Selectors-Tutorial@7bc17c7 · GitHub
Skip to content
This repository was archived by the owner on May 12, 2025. It is now read-only.

Commit 7bc17c7

Browse files
kawsarlogkawsarlog
authored
adding templates html
1 parent b7bbf8a commit 7bc17c7

24 files changed

Lines changed: 1990 additions & 0 deletions

‎templates/adjacent_sibling_combinator.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Adjacent Sibling Combinator Examples</title>
5+
<style>
6+
/* Add some basic styling for clarity */
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background-color: #f9f9f9;
11+
color: #333;
12+
}
13+
14+
h1 {
15+
font-size: 28px;
16+
margin-bottom: 20px;
17+
}
18+
19+
p {
20+
font-size: 18px;
21+
margin-bottom: 10px;
22+
}
23+
24+
.example {
25+
margin-bottom: 40px;
26+
border: 1px solid #ccc;
27+
padding: 20px;
28+
background-color: #fff;
29+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.example-title {
33+
font-weight: bold;
34+
font-size: 24px;
35+
margin-bottom: 10px;
36+
}
37+
38+
.example-description {
39+
margin-top: 5px;
40+
}
41+
42+
code {
43+
display: inline-block;
44+
background-color: #000000;
45+
padding: 2px 4px;
46+
font-family: Consolas, monospace;
47+
font-size: 16px;
48+
color: aliceblue;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<h1>Adjacent Sibling Combinator Examples</h1>
54+
55+
<div class="example">
56+
<h2 class="example-title">Example 1: Selecting adjacent sibling elements</h2>
57+
<p class="example-description">This example selects and applies styles to the <code>p</code> element that is an immediate sibling of the <code>h1</code> element.</p>
58+
<h1>Title</h1>
59+
<p>Paragraph 1</p>
60+
<h2>Subheading</h2>
61+
<p>Paragraph 2</p>
62+
<p>Paragraph 3</p>
63+
</div>
64+
65+
<div class="example">
66+
<h2 class="example-title">Example 2: Selecting adjacent sibling elements after a specific element</h2>
67+
<p class="example-description">This example selects and applies styles to the <code>p</code> element that is an immediate sibling appearing after the <code>h2</code> element.</p>
68+
<h1>Title</h1>
69+
<h2>Subheading</h2>
70+
<p>Paragraph 1</p>
71+
<h2>Another Subheading</h2>
72+
<p>Paragraph 2</p>
73+
<p>Paragraph 3</p>
74+
</div>
75+
76+
</body>
77+
</html>

‎templates/attribute_selector.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Attribute Selector Examples</title>
5+
<style>
6+
/* Add some basic styling for clarity */
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background-color: #f9f9f9;
11+
color: #333;
12+
}
13+
14+
h1 {
15+
font-size: 28px;
16+
margin-bottom: 20px;
17+
}
18+
19+
p {
20+
font-size: 18px;
21+
margin-bottom: 10px;
22+
}
23+
24+
.example {
25+
margin-bottom: 40px;
26+
border: 1px solid #ccc;
27+
padding: 20px;
28+
background-color: #fff;
29+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.example-title {
33+
font-weight: bold;
34+
font-size: 24px;
35+
margin-bottom: 10px;
36+
}
37+
38+
.example-description {
39+
margin-top: 5px;
40+
}
41+
42+
code {
43+
display: inline-block;
44+
background-color: #000000;
45+
padding: 2px 4px;
46+
font-family: Consolas, monospace;
47+
font-size: 16px;
48+
color: aliceblue;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<h1>Attribute Selector Examples</h1>
54+
55+
<div class="example">
56+
<h2 class="example-title">Example 1: Selecting elements with a specific attribute</h2>
57+
<p class="example-description">This example selects and applies styles to all elements that have the attribute <code>data-lang</code>.</p>
58+
<p data-lang="en">This paragraph has the attribute <code>data-lang</code> set to "en".</p>
59+
<p>This paragraph does not have the attribute <code>data-lang</code>.</p>
60+
</div>
61+
62+
<div class="example">
63+
<h2 class="example-title">Example 2: Selecting elements with a specific attribute value</h2>
64+
<p class="example-description">This example selects and applies styles to all elements that have the attribute <code>data-lang</code> with the value "fr".</p>
65+
<p data-lang="en">This paragraph has the attribute <code>data-lang</code> set to "en".</p>
66+
<p data-lang="fr">This paragraph has the attribute <code>data-lang</code> set to "fr".</p>
67+
</div>
68+
69+
<div class="example">
70+
<h2 class="example-title">Example 3: Selecting elements with an attribute value starting with a specific string</h2>
71+
<p class="example-description">This example selects and applies styles to all elements that have the attribute <code>class</code> with a value starting with "btn".</p>
72+
<button class="btn-primary">Primary Button</button>
73+
<button class="btn-secondary">Secondary Button</button>
74+
<button class="btn-success">Success Button</button>
75+
</div>
76+
77+
</body>
78+
</html>

‎templates/child_combinator.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Child Combinator Examples</title>
5+
<style>
6+
/* Add some basic styling for clarity */
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background-color: #f9f9f9;
11+
color: #333;
12+
}
13+
14+
h1 {
15+
font-size: 28px;
16+
margin-bottom: 20px;
17+
}
18+
19+
p {
20+
font-size: 18px;
21+
margin-bottom: 10px;
22+
}
23+
24+
.example {
25+
margin-bottom: 40px;
26+
border: 1px solid #ccc;
27+
padding: 20px;
28+
background-color: #fff;
29+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.example-title {
33+
font-weight: bold;
34+
font-size: 24px;
35+
margin-bottom: 10px;
36+
}
37+
38+
.example-description {
39+
margin-top: 5px;
40+
}
41+
42+
code {
43+
display: inline-block;
44+
background-color: #000000;
45+
padding: 2px 4px;
46+
font-family: Consolas, monospace;
47+
font-size: 16px;
48+
color: aliceblue;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<h1>Child Combinator Examples</h1>
54+
55+
<div class="example">
56+
<h2 class="example-title">Example 1: Selecting direct child elements</h2>
57+
<p class="example-description">This example selects and applies styles to all <code>p</code> elements that are direct children of the <code>div</code> element.</p>
58+
<div>
59+
<p>This paragraph is a direct child of the div.</p>
60+
<span>This span is not a direct child of the div.</span>
61+
</div>
62+
<p>This paragraph is not a direct child of the div.</p>
63+
</div>
64+
65+
<div class="example">
66+
<h2 class="example-title">Example 2: Selecting direct child elements with multiple levels of nesting</h2>
67+
<p class="example-description">This example selects and applies styles to all <code>p</code> elements that are direct children of the <code>div</code> element, regardless of the levels of nesting.</p>
68+
<div>
69+
<p>This paragraph is a direct child of the div.</p>
70+
<div>
71+
<p>This paragraph is not a direct child of the div.</p>
72+
<span>This span is not a direct child of the div.</span>
73+
</div>
74+
</div>
75+
<p>This paragraph is not a direct child of the div.</p>
76+
</div>
77+
78+
</body>
79+
</html>

‎templates/class_selector.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Class Selector Examples</title>
5+
<style>
6+
/* Add some basic styling for clarity */
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background-color: #f9f9f9;
11+
color: #333;
12+
}
13+
14+
h1 {
15+
font-size: 28px;
16+
margin-bottom: 20px;
17+
}
18+
19+
p {
20+
font-size: 18px;
21+
margin-bottom: 10px;
22+
}
23+
24+
.example {
25+
margin-bottom: 40px;
26+
border: 1px solid #ccc;
27+
padding: 20px;
28+
background-color: #fff;
29+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.example-title {
33+
font-weight: bold;
34+
font-size: 24px;
35+
margin-bottom: 10px;
36+
}
37+
38+
.example-description {
39+
margin-top: 5px;
40+
}
41+
42+
code {
43+
display: inline-block;
44+
background-color: #000000;
45+
padding: 2px 4px;
46+
font-family: Consolas, monospace;
47+
font-size: 16px;
48+
color: aliceblue;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<h1>Class Selector Examples</h1>
54+
55+
<div class="example">
56+
<h2 class="example-title">Example 1: Selecting elements with a specific class</h2>
57+
<p class="example-description">This example selects and applies styles to all elements with the class <code>.highlight</code>.</p>
58+
<p class="highlight">This paragraph has the class "highlight".</p>
59+
<p>This paragraph does not have the class "highlight".</p>
60+
</div>
61+
62+
<div class="example">
63+
<h2 class="example-title">Example 2: Selecting elements with multiple classes</h2>
64+
<p class="example-description">This example selects and applies styles to all elements with both classes <code>.highlight</code> and <code>.text-center</code>.</p>
65+
<p class="highlight text-center">This paragraph has both the classes "highlight" and "text-center".</p>
66+
<p class="highlight">This paragraph only has the class "highlight".</p>
67+
</div>
68+
69+
<div class="example">
70+
<h2 class="example-title">Example 3: Selecting elements with a specific class within a parent element</h2>
71+
<p class="example-description">This example selects and applies styles to elements with the class <code>.highlight</code> that are inside a parent element with the class <code>.container</code>.</p>
72+
<div class="container">
73+
<p class="highlight">This paragraph is inside a parent element with the class "container" and has the class "highlight".</p>
74+
<p class="highlight">This paragraph is also inside a parent element with the class "container" and has the class "highlight".</p>
75+
</div>
76+
<p class="highlight">This paragraph is not inside a parent element with the class "container".</p>
77+
</div>
78+
79+
</body>
80+
</html>

‎templates/containing_text_of_a_attribute.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Containing Text of an Attribute Examples</title>
5+
<style>
6+
/* Add some basic styling for clarity */
7+
body {
8+
font-family: Arial, sans-serif;
9+
padding: 20px;
10+
background-color: #f9f9f9;
11+
color: #333;
12+
}
13+
14+
h1 {
15+
font-size: 28px;
16+
margin-bottom: 20px;
17+
}
18+
19+
p {
20+
font-size: 18px;
21+
margin-bottom: 10px;
22+
}
23+
24+
.example {
25+
margin-bottom: 40px;
26+
border: 1px solid #ccc;
27+
padding: 20px;
28+
background-color: #fff;
29+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.example-title {
33+
font-weight: bold;
34+
font-size: 24px;
35+
margin-bottom: 10px;
36+
}
37+
38+
.example-description {
39+
margin-top: 5px;
40+
}
41+
42+
code {
43+
display: inline-block;
44+
background-color: #000000;
45+
padding: 2px 4px;
46+
font-family: Consolas, monospace;
47+
font-size: 16px;
48+
color: aliceblue;
49+
}
50+
51+
/* Styling for the example element */
52+
.example-element {
53+
border: 1px solid #ccc;
54+
padding: 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
/* Styling for the [*=] attribute selector */
59+
.example-element[name*="example"] {
60+
background-color: yellow;
61+
}
62+
</style>
63+
</head>
64+
<body>
65+
<h1>Containing Text of an Attribute Examples</h1>
66+
67+
<div class="example">
68+
<h2 class="example-title">Example: Selecting elements with attribute containing specific text</h2>
69+
<p class="example-description">This example selects and applies styles to elements that have an attribute containing a specific text.</p>
70+
<pre><code>div[name*="attribute-name"] {
71+
background-color: yellow;
72+
}</code></pre>
73+
<div class="example-element" name="example-one">Example One</div>
74+
<div class="example-element" name="example-two">Example Two</div>
75+
<div class="example-element" name="another-example">Another Example</div>
76+
</div>
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)