Styles of one list applying to other list

bananahair · November 27, 2022, 12:11pm

I´m working on a project for Style Stage. My problem is that the styling for a list in one part of the website is affecting a list in the bottom of the website.

Part of the perimeters of this challenge are that cannot change the HTML, so I´m trying to find work-arounds to point to the section of the website I want to style.

I´m attaching a CodePen with my project (I´m writing it on VSCode, hence elements in the head that seem unnecessary on CodePen).

I know it´s the ul and li that bottom that are causing problems but I really don´t know how to differentiate them.

This is the code in question that´s puzzling me

<h4 id="profile-title">Currently Staged Style</h4>
        <ul>
          <li class="profile-title"><span>Title:</span> <span>Main Stage</span></li>
          <li class="profile-author"><span>Author:</span> <span>Stephanie Eckles</span></li>
          <li class="profile-twitter">
            <span>Twitter:</span> <span><a href="https://twitter.com/5t3ph">5t3ph</a></span>
          </li>
          <li class="profile-website">
            <span>Website:</span> <span><a href="https://moderncss.dev">ModernCSS.dev</a></span>
          </li>
        </ul>
        <a href="/styles/css/main-stage.css">View Stylesheet</a>
      </div>
    </aside>
    <aside id="styles">
      <div class="container">
        <h2>Featured Styles</h2>
        <ul class="features">
          <li>
            <span>
              <a href="/styles/emphasis">Emphasis<span aria-hidden="true"></span></a>
              <span>by d-cs</span>
            </span>
          </li>
          <li>
            <span>
              <a href="/styles/solidstate">SolidState<span aria-hidden="true"></span></a>
              <span>by Maheshkumar</span>
            </span>
          </li>
          <li>
            <span>
              <a href="/styles/stageflix">Stageflix<span aria-hidden="true"></span></a>
              <span>by Suckcoder</span>
            </span>
          </li>
        </ul>

        <a href="/styles/" class="link-allstyles">View All Styles</a>
      </div>
    </aside>
    <footer class="page-footer">
      <div class="container">
        <p>
          Created and maintained by
          <a href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>
        </p>
        <ul>
          <li>
            <a href="https://twitter.com/5t3ph" class="link-twittercontact">Contact on Twitter</a>
          </li>
          <li>
            <a href="https://github.com/5t3ph/stylestage" class="link-github"
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 32 32"
                aria-hidden="true"
                focusable="false"
              >
                <path
                  d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
                ></path>
              </svg>
              Star on Github</a
            >
          </li>
          <li><a href="/feed/" class="link-rss">RSS Feed</a></li>
          <li><a href="/subscribe/" class="link-support">Subscribe to Updates</a></li>
        </ul>

This is the link to the CodePen with the full website on it:

https://codepen.io/bananahair/pen/bGKKvqO

I´ve tried using the footer id, but this doesn´t seem to specify it enough. I´m not looking for someone to give me the answer. Just tell me where to look, what to target.

That´s all. (Please ignore the horrific style in the rest of the website. I´m coming back to it as soon as I figure out this problem.)

Thank you!

DanielHuebschmann · November 27, 2022, 12:47pm

Hello,

look into CSS pseudo-classes!

Classes like

:first-of-type
or
:nth-of-type

that can target HTML elements with CSS will lead to your solution.

hbar1st · November 28, 2022, 5:12am

You can use ids on the ul elements or you can use specific parent child selectors (if the ul has different parents)

bananahair · November 28, 2022, 8:19pm

I´m still struggling with pointing to a particular part of the HTML code with my CSS in the Style Stage challenge that I´m trying to complete. (A link to this in my CodePen is below.)

The perimeters of the challenge state that I cannot add anything to the HTML.

Below is the HTML for the two sections causing me problems.

The top one is the “lists” section of the page which I intended to design as such.

<ul>
              <li>Flexbox</li>
              <li>Grid</li>
              <li>custom variables</li>
              <li>@supports()</li>
              <li>gradients</li>
              <li>animation</li>
              <li>3D transforms</li>
              <li>object-fit</li>
              <li>:focus-within</li>
              <li>calc()</li>
              <li>min() / max() / clamp()</li>
              <li>viewport units</li>
              <li>scroll-(margin/padding/snap)</li>
              <li>position: sticky</li>
              <li>two-value display</li>
              <li>expanded media query values</li>
              <li>variable fonts</li>
            </ul>

Below is the “footer” section that inherited the above design.

 <div class="container">
        <h2>Featured Styles</h2>
        <ul class="features">
          <li>
            <span>
              <a href="/styles/emphasis">Emphasis<span aria-hidden="true"></span></a>
              <span>by d-cs</span>
            </span>
          </li>
          <li>
            <span>
              <a href="/styles/solidstate">SolidState<span aria-hidden="true"></span></a>
              <span>by Maheshkumar</span>
            </span>
          </li>
          <li>
            <span>
              <a href="/styles/stageflix">Stageflix<span aria-hidden="true"></span></a>
              <span>by Suckcoder</span>
            </span>
          </li>
        </ul>

        <a href="/styles/" class="link-allstyles">View All Styles</a>
      </div>
    </aside>
    <footer class="page-footer">
      <div class="container">
        <p>
          Created and maintained by
          <a href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>
        </p>
        <ul>
          <li>
            <a href="https://twitter.com/5t3ph" class="link-twittercontact">Contact on Twitter</a>
          </li>
          <li>
            <a href="https://github.com/5t3ph/stylestage" class="link-github"
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 32 32"
                aria-hidden="true"
                focusable="false"
              >
                <path
                  d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
                ></path>
              </svg>
              Star on Github</a
            >
          </li>
          <li><a href="/feed/" class="link-rss">RSS Feed</a></li>
          <li><a href="/subscribe/" class="link-support">Subscribe to Updates</a></li>
        </ul>

I´ve tried to identify elements that differentiate these two sections of my page, but these have failed to differentiate them. I´m posting a link to my CodePen which features all my code. You´ll see efforts I´ve made there. Please take a look and tell me what I´m overlooking.

Again, a key perimeter of this challenge is that I can´t add classes or ids to the HTML.

Thank you for any assistance you can provide.

My code pen

hbar1st · November 28, 2022, 8:54pm

hi, which part of the css is the one that you were using last to target the top ul?

Edit: here, try this:

#main .container:nth-child(2) ul {
  border: 5px red dashed;
}

This will target the very specific ul you mentioned and nothing else.

bananahair · November 28, 2022, 9:25pm

Yes! This worked. I´m going to explain why I think it worked. Please correct me where I´ve misunderstood:

Inclusion of #main - this narrows the .container to this section of the page
Using :nth-child(2) specifies the particular .container to the 2nd appearance of it in the #main section of the page

hbar1st · November 28, 2022, 9:27pm

yes, so pick the 2nd child of type .container within main

bananahair · November 28, 2022, 9:28pm

Thanks for your help!

lasjorg · November 28, 2022, 9:32pm

I don’t get it? Why don’t you just use the about id?

#about ul {
  border: 5px red dashed;
}

bananahair · November 28, 2022, 9:41pm

Yes, this worked too. I´m realizing that I really didn´t look close enough and there were actually more than enough options to solve my issue.

lasjorg · November 28, 2022, 9:55pm

Are you not using the dev tools? They tell you all you need to know without even looking at the HTML in the editor.

You can code this site 100% in-browser and if you use local overwrites you can even have it saved to the CSS file. Not that I’m suggesting that is how I would solve this but it is a pretty nice workflow to know about and have handy.

Using the browser for prototyping is often more productive than using the CSS file, even with hot reloading. Especially when trying things out and debugging the CSS.

system · May 30, 2023, 9:55am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.