Home>

・ I want to change the color of some li elements.

Error message

・ Partial color change of li element
About the other menu at the bottom (class name "other"),
A class is attached to a part of the li element. (Class name "title")
About this CSS,
padding etc. are reacting, but for some reason only "color" of color change
Does not apply.

Applicable source code

        
          <ul>
            <li>Airbnb</li>
            <li>Recruitment information</li>
            <li>News</li>
            <li>Policy</li>
            <li>Help</li>
            <li>Diversity&Belonging</li>
            <li>Accessibility<span>New</span></li>
            <li>Company information</li>
          </ul>
        
        
          <ul>
            <li>Recommended staff</li>
            <li>Trust&safety</li>
            <li>Invite friends</li>
            <li>Airbnb Citizen</li>
            <li>Business trip</li>
            <li>Activity</li>
            <li>Accessibility<span>New</span></li>
            <li>Airbnbmag</li>
          </ul>
        
        
          <ul>
            <li>Hosting</li>
            <li>Reasons for becoming a host</li>
            <li>Invite to host</li>
            <li>Hospitable heart</li>
            <li>Host responsibilities</li>
            <li>Community Center</li>
            <li>Post your experience<span>New</span></li>
            <li>Open home</li>
          </ul>
        
        
          <ul>
            <li><i></i><i></i><i></i></li>
            <li>Terms of service</li>
            <li>Privacy</li>
            <li>Sitemap</li>
          </ul>
        
      
. container {
  margin: 0 auto;
  width: 70%;
}
li {
  list-style: none;
}
.other {
  width: 100%;
  border-bottom: 1px solid # c0c0c0;
  display: flex;
}
.line {
  width: 20%;
  padding: 40px 10px 10px 10px;
  float: left;
}
.line li {
  color: # 606060;
  font-weight: bold;
  font-size: 14px;
}
.line li: hover {
  text-decoration: underline;
  cursor: pointer;
}
.title {
  color: black;
  font-weight: bold;
  padding: 0 0 10px 0;
  border: none;
  cursor: normal;
}
.line span {
  background-color: # 2e8b57;
  color: white;
    border-radius: 3px;
      margin: 0 0 0 5px;
      padding: 0 5px 0 5px;
}
.fab {
  padding: 0 10px 15px 10px;
}

Class names are unique.

Supplemental information (FW/tool version etc.)

In addition, when this data is uploaded by Cyberduck,
The data was out of date. Does it take time to reflect?
If it is common sense of FTP, sorry,
I would appreciate it if you could tell me.

  • Answer # 1

    .line litakes precedence over.title.
    If you use.line li.title, it will be reflected. (Note: Do not use! Important)

    [Level of Detail-CSS: Cascading Style Sheet | MDN]
    https://developer.mozilla.org/en/docs/Web/CSS/Specificity

    [Engineers try to face up with CSS again-Level of detail-Qiita]
    https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4

    【[Introduction to CSS] Summary of CSS overwriting rules and level of detail | ]
    https://yantzn.com/entry/re-css-_study-01/


    [How to check CSS with Chrome Developer Tools | Anything on the web]
    https://nandemo-nobiru.com/2944/

    [For beginners! How to use Chrome's verification function (developer tool)]
    https://saruwakakun.com/html-css/basic/chrome-dev-tool