How to style multiple div classes-CodePudding

I am looking for how I can apply a single style to multiple div classes on CSS by giving them d same width, height and margin

HTML

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Page title</title>
   <link rel="stylesheet" href="index.css">
  </head>
<body>
 <div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div >/div>
 </div>
</body>
</html>

CSS

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

 .landing page{
   width: 100%;
   height: 100vh;
 }

 .box 1, box 2, box 3{
   width: 30%;
   height: 15vh;
   margin: 2px;
  }

But I want to also add a style to a two div classes in CSS by adding a 2px yellow border so they stands out from d rest. For example

CSS

.box1 .boxes{
     border: 2px yellow solid;
   }

CodePudding user response：

Remove the spaces from your class names, or else they will be treated as separate classes.

/* All elements with  */
.box {
  background: pink;
  height: 100px;
  width: 100px;
  margin: 2px;
}

.box1 {
  border: 2px yellow solid;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Add same class to all div

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div >/div>

and style them this way

.box {
  // your styles
}

If you want the yellow border to be added to specific divs, just create a class for it.

<div >/div>

and in css

.yellow-border {
    border: 2px yellow solid;
}

CodePudding user response：