CSS Diner

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, we see that each plate is represented by <plate />.

CSS solution:

The solution for this type of problem is that we have to take the help of 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, we see that each plate is represented by <bento/>.

CSS solution:

The solution for this type of problem is that we have to take the help of bento.

3. ID Selector:

Animation:

Description:

Here, we have to select the element with the help of 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:

All the elements have only one unique ID, and we have to target the element with the help of ID only.

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 have to select all the elements of B, which are children of A. Here, we have to select the element in such a way that B is present inside the element 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 take an example of an egg on a plate. We can say that the egg is a descendant of the plate.

CSS Answer:

plate apple

5. Combine descendent and ID selector:

Animation:

Description:

Here, we can combine any selector with all descendent 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 have to pick the descendent selector of the place with the help of ID, which is fancy.

CSS Answer:

#fancy pickle

6. Class Selector:

Animation:

Description:

In this class selector, we have to select the element with the help of the class name. The class selector selects all the elements where the same class is available. In HTML, we can give one ID to a particular element, but we can give one class to many elements.

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:

Can we provide the same class name to all the eggs?

CSS Answer:

We can use Apple. small.

7. Combining the class selector with all other selectors:

Animation:

Description:

We can connect the class selector with another selector with the help of 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:

Is it possible to select all the small oranges with similar class names? Here, we are not selecting all the oranges of class names as small.

CSS Answer:

orange.small

8. Levels 1-7 overview:

Animation:

Description:

There is no description for this. This is only the overview for the lesson 1 to 7.

Examples:

There is no example of this. This is only the overview for the lesson 1 to 7.

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 need all the small oranges on the bentos. How can we select those oranges that are on the bentos? How can we identify all the properties of the bentos?

CSS Answer:

Bento orange.small

9. Combining selector with commas:

Animation:

Description:

Here, we have to select the A and B elements, or we have to select 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 can select all the elements in HTML with the help of a universal selector. We can represent the universal selector as an asterisk(*). We can also call it 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 can select all the elements available in A with the help of A*.

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:

Is it possible to select all the children's elements of a particular element?

CSS Answer:

plate *

12. Adjacent sibling selector:

Animation:

Description:

We can select all the elements of B, which is the child element of A. When one element follows another element, then we can call them siblings. In HTML, all the siblings have the same indentation level.

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 possible to select all the apples which are directly adjacent to the plates?

CSS Answer:

plate + apple

13. General sibling selector:

Animation:

Description:

In this selector, we have to select the element of B, which is the child of A. So, we have to select all the siblings who follow A. So here, we have to use A~B to select the siblings.

Examples;

We have solved a problem similar to the below 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 have to make sure that we select all the siblings of the pickle after the bento.

CSS Solution:

bento ~ pickle

14. Child selector:

Animation:

Description:

Here, we have to select the element of B, which is the direct child of A. We can also select those elements that are the direct child of another element. The elements that are directly nested to another element can be called child elements. The elements that are nested deeper, we can call them descendent elements.

Examples:

We have solved a problem similar to the below 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, there is no need to select the apples on the plate.

CSS Answers:

plate > apple

15. First child pseudo selector:

Animation:

Description:

Here, we have to select all the first elements of the A-type. We can combine the pseudo selector with any other selector.

Example:

We have solved a problem similar to the below 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 have to select all the oranges, which are the first selectors of the plate. We may use the pseudo selector here.

CSS solution:

plate orange:first-child

16. Only child pseudo selector:

Animation:

Description:

Here, we have to select those elements of A that are inside of another one.

Examples:

We have solved a problem similar to the below example.

/* 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 have to select the element of A, which is the last child of another element.

Examples:

We have solved a problem similar to the below example.

: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 can do this in many ways. Let's think that the apple is the last child element of the fancy element, and the pickle is the last child of its type. Alternatively, we can select the fancy plate containing apples as the apples are small, and the pickle is small.

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 have to select the Nth child, i.e., 1st, 3rd, 12th, etc., from another element.

Examples:

We have solved a problem similar to the below example.

/* 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:

Can we select a particular child element from another element?

CSS solution:

plate:nth-child(3)

19. Nth last-child selector:

Animation:

Description:

Here, we have to select the children from the last child of the parent element. This is similar to the nth child but is processed from the last.

Examples:

We have solved a problem similar to the below example.

/* 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 may be obvious to use bento:first-of-type here, but can we conjure up a more contrived solution, such as counting from the back? For example, counting from the last bento, we see that the bento we want to select is really the third child. How can we select this bento in terms of "last children"?

CSS solution:

bento:nth-last-child(3)

20. First of type selector:

Animation:

Description:

Here, we have to select the first element of type A, which is present in another 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:

Can we select the first element of a particular type?

CSS solution:

apple:first-of-type

21. Nth of type:

Animation:

Description:

Here, we have to select the element of type A, which is present in another element. We have to select the element present in an even or odd position.

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 know how to select a pseudo selector to select the nth element, then it will be a benefit for us. Also, we have to know what kind of parameter the pseudo selector accepts.

CSS Solution:

plate:nth-of-type(even)

22. Nth type of selector with the formula:

Animation:

Description:

We can select the nth element with the help of the nth of type formula.

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 have to select a particular type of element. If we want to select the 4th instance of the plate, starting at instance 2, then we have to write plate:nth-of-type(4n+2).

CSS Solution:

plate:nth-of-type(2n+3)

23. Only of type:

Animation:

Description:

Here, we have to select a similar type of 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 select the element that has an apple as the first child?

CSS solution:

plate > apple:only-of-type

24. Last of type:

Animation:

Description:

Here, we have to select the last element of the last 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 have to select all the elements that are of the last element type.

CSS solution:

orange:last-of-type, apple:last-of-type

25. Empty:

Animation:

Description:

Here, we have to select those elements that have no children.

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 have to select those elements that have no children.

CSS answer:

bento:empty

26. Negation Pseudo class:

Animation:

Description:

Here, we have to select all those elements that don't match 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 select an element that does not belong to a certain 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 select all those general elements based on whether or not those elements have certain attributes?

CSS Answer:

[for]

28. Attribute selector (Specific):

Animation:

Description:

Here, we have to select the element of A, which has some specific 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:

Can we select all those elements that have some specific property?

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 select the element based not only on its having a certain attribute but also on the value of that attribute?

CSS Answer

30. Attribute start with selector:

Animation:

Description;

Here, we have to select an element that has a specific attribute that starts with a particular 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="Mary">
      <orange />
    </bento>
  </div>
</body>
</html>

Hints:

Can we select those elements that have an attribute whose value starts with a particular character?

CSS Answer:

*[for^="Sa"]

31. Attribute End with selector:

Animation:

Description:

Here, we have to select those elements that end with the attribute of a specific character.

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 select all those elements whose attributes end with a specific character?

CSS answer:

*[for$="ato"]

32. Attribute wildcard selector:

Animation:

Description:

Here, we have to select those elements whose attribute value contains a specific 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 select all those elements whose attributes contain the specific character?

CSS Answer:

bento[for*="obb"]

Next TopicCSS Image Effects

← prev next →