Introduction
CSS Diner is a very nice place to let you learn CSS very fast. Simply complete all 32 challenges and make sure you understand the intuition. If you get stuck, read below and again make sure you understand the intuition.
Everything available in this article is based on the CSS diner game. The main aim of this diner is to make developers familiar with CSS selectors.
The main aim of this game is to select the wiggling items with the help of a CSS selector.
To get the CSS selector, we have to go to the CSS selector description section, then we have to refresh that one, and then we get the CSS selector.
Usage:
For this dinner, we have been given a GIF, which we are going to select. With the help of the below things, we should go with the companion, and then we are going to simply select the game, and then we have to start the game.
- Watch: In this game, first, we must watch the gif to know what is wiggling.
- HTML viewer: Then we have to click the HTML file to open it, and then we have to think about how we can make that gif that we saw in step 1. It is important to target or select the name element so that we may need to deduce the element name, classes or attributes available in that HTML code.
- Hint: In the hint section, if we face any difficulties during the coding, then it will provide some hints to get into the correct path. The things we find the specific parts of the CSS selector description and example section in the hint section.
- CSS viewer: When we click on the CSS viewer, we may see more than one solution for one issue. We may also find a completely different solution from the CSS viewer. If we find this type of situation, then we have to pull a request to the repo with our additional solution.
Types of CSS Diner
Let's discuss all the types of CSS diners one by one.
1. Type:
Animation:
Description:
Here, we have to select all the elements of type A. This A type refers to the <div>,<p> and <ul> tag.
Example:
Some examples of this type of element are :
div {
/* style all <div> elements */
}
p {
/* style all <p> elements */
}
HTML code:
Here, we have to write the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate />
<plate />
</div>
</div>
</body>
</html>
Hint:
In the HTML code, each plate is symbolized by <plate />.
CSS solution:
The resolution to this particular issue involves utilizing a plate.
2. Type:
Animation:
Description:
Here, we have to select all the elements of type A. This A type refers to the <div>,<p> and <ul> tag.
Example:
Some examples of this type of element are :
div {
/* style all <div> elements */
}
p {
/* style all <p> elements */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento />
<plate />
<bento />
</div>
</div>
</body>
</html>
Hints:
In the HTML code, each plate is symbolized by <bento/>.
CSS solution:
The resolution for this kind of issue involves utilizing bento for assistance.
3. ID Selector:
Animation:
Description:
Here, we need to choose the element using its ID.
Example:
/* EXAMPLES */
#cool {
/* style the element with id="cool" */
}
/* you can also combine the ID selector with the type selector */
ul#long {
/* style the element <ul id="long"> */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate id= "fancy"/>
<plate />
<bento />
</div>
</div>
</body>
</html>
Hint:
Each element is assigned a single distinctive ID, which is crucial for pinpointing and selecting the specific element.
CSS Answer:
/* solution 1 */
#fancy /* select any element with id="fancy" */
/* solution 2 */
plate#fancy /* select the plate element with id="fancy" */
4. Descendent Selector:
Animation:
Description:
Here, we need to choose all the items from B that are considered as descendants of A. The selection should ensure that B is contained within the scope of A.
Examples:
/* EXAMPLES */
p strong {
/* style <strong> elements that are children of <p> elements */
}
#fancy span {
/* style any <span> elements that are inside of the element with id="fancy" */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento />
<plate>
<apple />
</plate>
<apple />
</div>
</div>
</body>
</html>
Hints:
Let's consider a scenario with an egg placed on a plate. It can be described that the egg is a offspring of the plate.
CSS Answer:
plate apple
5. Combine descendent and ID selector:
Animation:
Description:
Here, we have the flexibility to combine any selector with all descendant selectors.
Example:
/* EXAMPLE */
#cool span {
/* style all <span> elements that are inside of the element with id="cool" */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento>
<orange />
</bento>
<plate id="fancy">
<pickle />
</plate>
<plate>
<pickle />
</plate>
</div>
</div>
</body>
</html>
Hints:
Here, we need to select the descendant element using the unique ID selector.
CSS Answer:
fancy pickle
6. Class Selector:
Animation:
Description:
In this class selector, we need to choose the element based on its class name. The class selector targets all elements that share the same class. While HTML allows assigning a unique ID to each element, multiple elements can share the same class.
Example:
/* EXAMPLE */
.neato {
/* style all elements with class="neato" */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<apple />
<apple class= "small"/>
<plate>
<apple class= "small"/>
</plate>
<plate />
</div>
</div>
</body>
</html>
Hints:
Is it possible to assign identical class names to all of the eggs?
CSS Answer:
We can use Apple. small.
7. Combining the class selector with all other selectors:
Animation:
Description:
We can link the class selector to another selector using the type operator.
Examples:
/* EXAMPLES */
ul.important {
/* style <ul class="points"> elements that have class="important" */
}
#big.wide {
/* style the element with id="big" that also has class="wide" */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<apple />
<apple class= "small"/>
<bento>
<orange class= "small"/>
</bento>
<plate>
<orange />
</plate>
<plate>
<orange class= "small"/>
</plate>
</div>
</div>
</body>
</html>
Hints:
Can we target all the petite oranges sharing identical class names? In this scenario, we are excluding the selection of all oranges with class names labeled as small.
CSS Answer:
orange.small
8. Levels 1-7 overview:
Animation:
- Description:
This serves as a general introduction without detailed information, providing an outline for lessons 1 through 7.
Examples:
This serves as an introduction to lessons 1 through 7, providing an overview without any specific examples.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento>
<orange />
</bento>
<orange class= "small"/>
<bento>
<orange class= "small"/>
</bento>
<bento>
<apple class= "small"/>
</bento>
<bento>
<orange class= "small"/>
</bento>
</div>
</div>
</body>
</html>
Hints:
Here, we are required to include all the petite oranges in the bento boxes. How can we specifically choose the oranges located within the bento boxes? How can we recognize and list down all the characteristics of the bento boxes?
CSS Answer:
Bento orange.small
9. Combining selector with commas:
Animation:
Description:
Here, we need to choose either the A and B elements or the A and B elements.
Examples:
/* EXAMPLES */
p, .fun {
/* style all <p> elements as well as all elements with class="fun" */
}
a, p, div {
/* style all <a>, <p>, and <div> elements */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<pickle class= "small"/>
<pickle />
<plate>
<pickle />
</plate>
<bento>
<pickle />
</bento>
<plate>
<pickle />
</plate>
<pickle />
<pickle class= "small"/>
</div>
</div>
</body>
</html>
Hints:
Can we select all the elements at once?
CSS Answer:
plate, bento
10. Universal selector:
Animation:
Description:
We have the ability to target all elements within an HTML document by utilizing a universal selector, denoted by an asterisk (*). This selector can also be referred to as a wildcard.
Example:
/* EXAMPLES */
p * {
/* style all elements inside of all <p> elements */
}
ul.fancy * {
/* style every element inside all <ul class="fancy"> elements */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<apple />
<plate>
<orange class= "small"/>
</plate>
<bento />
<bento>
<orange />
</bento>
<plate id= "fancy"/>
</div>
</div>
</body>
</html>
Hints:
Can we select everything at once?
CSS Answer:
We can select everything with the help of *.
11. Combine with universal selector:
Animation:
Description:
We have the ability to choose all the items present in collection A by utilizing the A* method.
Examples:
/* EXAMPLES */
p * {
/* style all elements inside of all <p> elements */
}
ul.fancy * {
/* style every element inside all <ul class="fancy"> elements */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate id="fancy">
<orange class= "small"/>
</plate>
<plate>
<pickle />
</plate>
<apple class= "small"/>
<plate>
<apple />
</plate>
</div>
</div>
</body>
</html>
Hints:
Can all child elements of a specific element be selected collectively?
CSS Answer:
plate *
12. Adjacent sibling selector:
Animation:
Description:
We have the ability to choose all the components of B, which are the descendant elements of A. When one element comes after another element, they are referred to as siblings. Within HTML, all siblings are aligned at the same level of indentation.
Examples:
/* EXAMPLES */
p + .intro {
/* styles every element with class="intro" that directly follows a <p> */
}
div + a {
/* style every <a> element that directly follows a <div> */
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento>
<apple class= "small"/>
</bento>
<plate />
<apple class= "small"/>
<plate />
<apple />
<apple class= "small"/>
<apple class= "small"/>
</div>
</div>
</body>
</html>
Hints:
Is it feasible to choose all the apples that are positioned immediately next to the plates?
CSS Answer:
plate + apple
13. General sibling selector:
Animation:
Description:
In this scenario, our objective is to target the B element, specifically as a child of A. Therefore, we need to encompass all the sibling elements that come after A. To achieve this, the appropriate selector to employ is A~B.
Examples;
We have addressed an issue that resembles the following example.
/* EXAMPLE */
div.main-intro ~ p {
/* style all elements <p> after <div class="main-intro"> that are on the same level as the div */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<pickle />
<bento>
<orange class= "small"/>
</bento>
<pickle class= "small"/>
<pickle />
<plate>
<pickle />
</plate>
<plate>
<pickle class= "small"/>
</plate>
</div>
</div>
</body>
</html>
Hints:
We need to ensure that we choose all the adjacent elements of the pickle following the bento.
CSS Solution:
bento ~ pickle
14. Child selector:
Animation:
Description:
Here, we need to choose the B element that is the immediate offspring of A. It is also possible to choose elements that are the immediate offspring of another element. Elements that are directly enclosed within another element can be referred to as child elements. Elements that are nested further down can be referred to as descendant elements.
Examples:
We have resolved an issue akin to the following example.
/* EXAMPLE */
div#container > ul {
/* style all <ul> elements that are children of <div id="container"> */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate>
<bento>
<apple />
</bento>
</plate>
<plate>
<apple />
</plate>
<plate />
<apple />
<apple class= "small"/>
</div>
</body>
</html>
Hints:
Here, it is unnecessary to pick the apples from the plate.
CSS Answers:
plate > apple
15. First child pseudo selector:
Animation:
Description:
Here, we need to choose all initial elements of type A. The pseudo selector can be merged with another selector of your choice.
Example:
We have successfully addressed an issue that resembles the following example.
/* EXAMPLES */
:first-child {
/* style all first child elements */
}
p:first-child {
/* style all first child <p> elements */
}
div p:first-child {
/* style all first child <p> elements that are in a <div> */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento />
<plate />
<plate>
<orange />
<orange />
<orange />
</plate>
<pickle class= "small"/>
</div>
</body>
</html>
Hints:
Here, we need to choose all the oranges, which are the initial selectors on the plate. Utilizing the pseudo selector is an option in this case.
CSS solution:
plate orange:first-child
16. Only child pseudo selector:
Animation:
Description:
Here, we need to choose the elements from A that are contained within another element.
Examples:
We have successfully resolved an issue akin to the following illustration.
/* EXAMPLES */
span:only-child {
/* style the <span> elements that are the only child of some other element */
}
div p:only-child {
/* style the <p> inside any <div> so long as the <p> is the only one of its kind */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate>
<apple />
</plate>
<plate>
<pickle />
</plate>
<bento>
<pickle />
</bento>
<plate>
<orange class= "small"/>
<orange />
</plate>
<pickle class= "small"/>
</div>
</body>
</html>
Hints:
Is it possible to select many elements at once?
CSS code:
plate apple:only-child, plate pickle:only-child
17. Last child pseudo selector:
Animation:
Description:
Here, we need to choose the A element that serves as the final child of a different element.
Examples:
We have addressed an issue akin to the following illustration.
:last-child {
/* style all last-child elements */
}
span:last-child {
/* style all last-child <span> elements */
}
ul li:last-child {
/* style the last <li> element inside every <ul> */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate id="fancy">
<apple class= "small"/>
</plate>
<plate />
<plate>
<orange class= "small"/>
<orange />
</plate>
<pickle class= "small"/>
</div>
</div>
</body>
</html>
Hints:
We have multiple options for achieving this. Consider the scenario where the apple serves as the final child element within the elegant element, while the pickle acts as the ultimate child of its category. Another approach could involve choosing the sophisticated dish that holds small apples, as well as the small pickle.
CSS Answer:
/* Solution 1 */
plate#fancy apple:last-child, pickle:last-child /* contrived */
/* Solution 2 */
#fancy apple.small pickle.small /* realistic */
18. Nth child Psedo selector:
Animation:
Description:
Here, we need to choose the Nth child, for example, 1st, 3rd, 12th, etc., from a different element.
Examples:
We have successfully addressed an issue akin to the following illustration.
/* EXAMPLES */
:nth-child(8) {
/* style every element that is the 8th child of another element */
}
div p:nth-child(2) {
/* style the second <p> in every <div> */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate />
<plate />
<plate />
<plate id= "fancy"/>
</div>
</div>
</body>
</html>
Hints:
Yes, we can target a specific child element within another element using CSS selectors.
CSS solution:
plate:nth-child(3)
19. Nth last-child selector:
Animation:
Description:
Here, we need to choose the descendants starting from the last child of the parent element. This behaves similarly to the nth child selector but operates in reverse from the end.
Examples:
We have successfully resolved an issue akin to the following demonstration.
/* EXAMPLE */
:nth-last-child(2) {
/* styles all second-to-last child elements */
}
HTML code:
The HTML code for this problem is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate />
<bento />
<plate>
<orange />
<orange />
<orange />
</plate>
<bento />
</div>
</div>
</body>
</html>
Hints:
It might seem straightforward to utilize bento:first-of-type in this scenario, but could we brainstorm a more complex approach, like referencing elements from the end? For instance, if we count backwards from the final bento, we realize that the desired bento is essentially the third-to-last child. How would we go about targeting this specific bento in relation to "last children"?
CSS solution:
bento:nth-last-child(3)
20. First of type selector:
Animation:
Description:
Here, we need to choose the initial A-type element contained within a different element.
Example:
Below is an example similar to this.
/* EXAMPLES*/
span:first-of-type {
/* style the first <span> in any element */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<orange class= "small"/>
<apple />
<apple class= "small"/>
<apple />
<apple class= "small"/>
<plate>
<orange class= "small"/>
<orange />
</plate>
</div>
</body>
</html>
Hints:
Is it possible to choose the initial element of a specific category?
CSS solution:
apple:first-of-type
21. Nth of type:
Animation:
Description:
Here, we need to choose the type A element contained within another element. The selection criteria involve choosing elements based on their position, whether they are in an odd or even index.
Example:
Below is an example similar to this.
/* EXAMPLES */
div:nth-of-type(2) {
/* style the second instance of a <div> */
}
.example:nth-of-type(odd) {
/* style all odd instances of elements with class="example" */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate />
<plate />
<plate />
<plate />
<plate id= "fancy"/>
<plate />
</div>
</body>
</html>
Hints:
If we understand how to choose a pseudo selector to target the nth element, it can be advantageous. Additionally, we need to be aware of the type of parameter that the pseudo selector can take.
CSS Solution:
plate:nth-of-type(even)
22. Nth type of selector with the formula:
Animation:
Description:
We have the ability to choose the nth item using the nth-of-type expression.
Example:
Below is an example similar to this.
/* EXAMPLE */
span:nth-of-type(6n+2) {
/* style every 6th instance of a <span>, starting from (and including) the second instance */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate />
<plate>
<pickle class= "small"/>
</plate>
<plate>
<apple class= "small"/>
</plate>
<plate />
<plate>
<apple />
</plate>
<plate />
</div>
</div>
</body>
</html>
Hints:
Here, we need to choose a specific kind of element. To target the fourth occurrence of the plate, beginning at the second occurrence, the selector should be plate:nth-of-type(4n+2).
CSS Solution:
plate:nth-of-type(2n+3)
23. Only of type:
Animation:
Description:
Here, we need to choose a comparable element.
Example:
Below is an example similar to this.
/* EXAMPLE */
p span:only-of-type {
/* selects a <span> within any <p> if it is the only <span> in there */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate id="fancy">
<apple class= "small"/>
<apple />
</plate>
<plate>
<apple class= "small"/>
</plate>
<plate>
<pickle />
</plate>
</div>
</div>
</body>
</html>
Hints:
Can we choose the element that contains an apple as its initial child?
CSS solution:
plate > apple:only-of-type
24. Last of type:
Animation:
Description:
Here, we need to choose the final item within the ultimate element.
Example:
Below is an example similar to this.
/* EXAMPLES */
div:last-of-type {
/* styles the last <div> in every element */
}
p span:last-of-type {
/* styles the last <span> in every <p> */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<orange class= "small"/>
<orange class= "small"/>
<pickle />
<pickle />
<apple class= "small"/>
<apple class= "small"/>
</div>
</div>
</body>
</html>
Hints:
Here, we need to choose all the items that belong to the final type of element.
CSS solution:
orange:last-of-type, apple:last-of-type
25. Empty:
Animation:
Description:
Here, we need to choose elements that do not contain any child elements.
Example:
Below is an example similar to this.
/* EXAMPLE */
div:empty {
/* style all empty <div> elements */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento />
<bento>
<pickle class= "small"/>
</bento>
<plate />
<bento />
</div>
</div>
</body>
</html>
Hints:
Here, we need to choose the elements that do not contain any child elements.
CSS answer:
bento:empty
26. Negation Pseudo class:
Animation:
Description:
Here, we need to choose all elements that do not correspond to the negation selector.
Example:
Below is an example similar to this.
/* EXAMPLES */
:not(#fancy) {
/* style all elements that do not have id="fancy" */
}
div:not(:first-child) {
/* style every <div> that is not a first child */
}
:not(.big, .medium) {
/* style all elements that do not have class="big" or class="medium" */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate id="fancy">
<apple class= "small"/>
</plate>
<plate>
<apple />
</plate>
<apple />
<plate>
<orange class= "small"/>
</plate>
<pickle class= "small"/>
</div>
</body>
</html>
Hints:
Can we choose an element that is not part of a specific class?
CSS Solution:
Apple:not(.small)
27. Attribute selector (General):
Animation:
Description:
Here, we have to select those elements that have a specific attribute. We have to take the attribute inside of the opening tag. For example <span attribute="value"></span>. If an attribute contains no value, then we can make it blank.
- Example:
Below is an example similar to this.
/* EXAMPLES */
a[href] {
/* style all <a> elements that have an href attribute */
}
[type] {
/* style all elements that have a type attribute */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento>
<apple class= "small"/>
</bento>
<apple for= "Ethan"/>
<plate for="Alice">
<pickle />
</plate>
<bento for="Clara">
<orange />
</bento>
<pickle />
</div>
</body>
</html>
Hints:
Can we choose specific elements by filtering them based on the presence or absence of particular attributes?
CSS Answer:
[for]
28. Attribute selector (Specific):
Animation:
Description:
Here, we need to choose the element from A that possesses a particular attribute.
Example:
Below is an example similar to this.
/* EXAMPLES */
[value] {
/* style all elements that have a value attribute */
}
a[href] {
/* style all <a> elements that have an href attribute */
}
input[disabled] {
/* styles all <input> elements with the disabled attribute */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate for="Sarah">
<pickle />
</plate>
<plate for="Luke">
<apple />
</plate>
<plate />
<bento for="Steve">
<orange />
</bento>
</div>
</body>
</html>
Hints:
Is it possible to choose all elements that possess a particular attribute?
CSS Answer:
plate[for]
29. Attribute value selector:
Animation:
Description:
Here, we have to select the element
which has some specific attributes.
Example:
Below is an example similar to this.
/* EXAMPLE */
input[type="checkbox"] {
/* style all <input> elements with type="checkbox" */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<apple for="Alexei" />
<bento for="Albina">
<apple />
</bento>
<bento for="Vitaly">
<orange />
</bento>
<pickle />
</div>
</body>
</html>
Hints:
Can we target an element not just by a specific attribute but also by the attribute's value?
CSS Answer
bento[for="Vitaly"]
30. Attribute start with selector:
Animation:
Description;
Here, we need to choose an element that possesses a distinct attribute commencing with a specific character.
Example:
Below is an example similar to this.
/* EXAMPLE */
.toy[category^="Swim"] {
/* style elements with class toy and with attribute category="Swim[...]" */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<plate for="Sam">
<pickle />
</plate>
<bento for="Sarah">
<apple class= "small"/>
</bento>
<bento for="Abdul">
<orange />
</bento>
</div>
</body>
</html>
Hints:
Is it possible to choose elements that possess an attribute with a value that commences with a specific character?
CSS Answer:
*[for^="Sa"]
31. Attribute End with selector:
Animation:
Description:
Here, we need to choose elements that conclude with a particular character attribute.
Example:
Below is an example similar to this.
/* EXAMPLE */
img[src$=".jpg"] {
/* style all images with a .jpg extension */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<apple class= "small"/>
<bento for="Hayato">
<pickle />
</bento>
<apple for= "Ryota"/>
<plate for="Minato">
<orange />
</plate>
<pickle class= "small"/>
</div>
</body>
</html>
Hints:
Can we choose all elements with attributes that conclude with a particular character?
CSS answer:
*[for$="ato"]
32. Attribute wildcard selector:
Animation:
Description:
Here, we need to choose elements that have an attribute value containing a particular character.
Example:
Below is an example similar to this.
/* EXAMPLES */
img[src*="/thumbnails/"] {
/* style all image elements that show images from the "thumbnails" folder */
}
[class= "heading"] {
/* style all elements with "heading" in their class, like class= "main-heading" and class= "sub-heading" */
}
HTML code:
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<bento for="Robbie">
<apple />
</bento>
<bento for="Timmy">
<pickle />
</bento>
<bento for="Bobby">
<orange />
</bento>
</div>
</body>
</html>
Hints:
Can we choose all elements that have attributes containing a particular character?
CSS Answer:
bento[for*="obb"]