CODEWITHSUNDEEP
htmlcssclass
user3904830
user3904830

Reputation:

Apply CSS features only to one div using classes?

I found this tutorial on css:

http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

it says css file:

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

and the html file:

<html>
<head>
 <title>title</title>
 <link href="s.css" rel="stylesheet">
</head>
<body>
<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>
</body>
</html>

it worked great but I want to put the css features only to one div, not the whole site, so I tried to put all css features in class like this:

div.list{
 * {margin: 0; padding: 0;}

    div {
      margin: 20px;
    }
    .
    .
    .
    .
    .
    .
    .
    .
    .
}

and change the html to:

<div class="list">

I also tried to put them in .list class but I have lost all the formatting what should I do?

Upvotes: 2

Views: 363

Answers (1)

Robby Cornelissen
Robby Cornelissen

Reputation: 97120

You can not nest CSS classes like that. If you want to limit the application of CSS classes to elements that appear within an element with a given class name (in this case .list), you can prefix all the class definitions like this:

.list * {margin: 0; padding: 0;}

.list div {
  margin: 20px;
}

.list ul {
  list-style-type: none;
  width: 500px;
}

.list h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

.list li img {
  float: left;
  margin: 0 15px 0 0;
}

.list li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

.list li {
  padding: 10px;
  overflow: auto;
}

.list li:hover {
  background: #eee;
  cursor: pointer;
}

More information about CSS selectors can be found here.

The one used in this case is the relationship-based selector A E that applies style definitions to Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)

Upvotes: 3

Related Questions