CSS Question chaining and specificity


#1

I have a question

when doing a lesson, there is a part where I have to select a tag (h5) to change color purple on CSS. but I put another color on an h5 using the class (.publish-time) on gray. Why did it still changed to purple even though I have a class, meaning that the element is more specific than the tag?


#2

i made a simple example:

http://jsbin.com/lawexi/edit?html,css,output

and the class is applying the color just fine. Please provide code when asking such questions, given otherwise its really difficult to replicate and solve the problem


#3

![57%20PM|690x384](upload://8gxmVc2asVpzea2vmNXXK![57%20PM|690x384]

Notice please in both images how I put class=“publish-time” on h6 and on CSS I put .publish-time in color red and it still does not change. Am I doing something wrong?


#4

please just copy the full html and css code to the forum, so i can run it. Debugging from an image is really difficult


#5
Published: 2 Days Ago

.publish-time {
color:red;
}


#6

let me rephrase that, the full html and css code please.


#7
<!DOCTYPE html>
<html>

<head>
  <link href="style.css"type="text/css" rel="stylesheet">
  <title>Vacation World</title>
  
</head>

<body>
  <h1 class="title cursive capitalize">Top Vacation Spots</h1>
  <h5>By: Stacy Gray</h5>
  <h6 class="publish-time">Published: 2 Days Ago</h6>

  <p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>

  <h2 class="destination">1. Florence, Italy</h2>
  <div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. 
    <h5>Top Attractions</h5>
    <ul>
      <li>Museums</li>
      <li>Bike Tours</li>
      <li>Historical Monuments</li>
    </ul>
  </div>

  <h2 class="destination">2. Beijing, China</h2>
  <div class="description">A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on viewing the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.
   
    <h5>Top Attractions</h5>
    <ul>
      <li>Biking</li>
      <li>Historical Sites</li>
      <li>Restaurants and Dining</li>
    </ul>
  </div>

  <h2 class="destination">3. Seoul, South Korea</h2>
  <div class="description">The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city centercomplete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.

    <h5>Top Attractions</h5>
    <ul>
      <li>Parasailing</li>
      <li>Segway Tours</li>
      <li>Spas and Resorts</li>
    </ul>
  </div>

  <h2> More Desinations </h2>
  <ul>
    <li><h4 class="destination">Jackson Hole, Wyoming</h4></li>
    <li><h4 class="destination">Cape Town, South Africa</h4></li>
    <li><h4 class="destination">La Paz, Bolivia</h4></li>
  </ul>

  <p>&mdash;Best of luck with your travels, and be sure to send pictures and stories. We"d love to hear them!</p>


</body>

</html>

 p {
      font-family: Arial;
}
h1 {
  color:maroon;
}
.title{
  color:teal;
}
.uppercase {
  text-transform:uppercase;
}

}
.publish-time {
  color:red;
}
.cursive {
  font-family:cursive;
}
.capitalize {
  text-transform:capitalize;
}
h2.destination {
  font-family:cursive;
}
.description h5 {
  color:teal;
}
h5 {
  color:rebeccapurple;
}

#8

Seems all fine? Css uses a point system to resolve conflicting css property. A element (h5 for examle) is worth 1 point, a class 10 points, an id 100 points and inilne style 1000 points.

which (chained) css selectors is the property that is getting applied. If there are an even number of points, the last property gets applied

its actually really nice that classes overrule elements.


#9

I’m trying to run .publish-time in color red o CSS. Since I specify that on CSS I don’t know why shows up. Does my code have an even number of points? How can I know how many points I have to see if the specific code I want applies?


#10
.uppercase {
  text-transform:uppercase;
}

} // what is this one for?

see comment. You simple have a } too many

points are only relevant when having conflicting css properties, which you do not have

you can’t see, you have to know how much each selector is worth. You can find this on the internet. But this is totally not relevant to your problem at the moment


#11

I found the problem, I had an extra } so that’s why it didn’t run well

Thank you for your help!


#12

i said as much? But good that you found it :slight_smile: