CSS SPECIFITY How to overrwrite styles for a class

Question

I have a search bar in page1 and I have the same search bar in page2.

Html for the search bar in page1:

<div class="home-container">
  <div class="label ml-3">
    <h5>Enter Steam Profile URL<h5>
  </div>
  <div class="controls">
    <form action="/user" method="GET">
      <input type="text" name="url" class="url-input" placeholder="Enter Steam Profile URL">
      <button class="search-submit" type="submit"><i class="fas fa-search"></i></button>
    </form>
  </div>
</div>

Html for search bar in page2:

<div class="container mt-5 userpage-container">
  <div class="controls">
    <form action="/user" method="GET">
      <input type="text" name="url" class="url-input" placeholder="Enter Steam Profile URL">
      <button class="search-submit" type="submit"><i class="fas fa-search"></i></button>
    </form>
  </div>
</div>

CSS for search bar in page1:

.url-input{
  outline: none;
  padding:1.9rem;
  font-size: 1.5rem;
  width: 100%;
  background: #FFFFFF;
  mix-blend-mode: normal;
  border: 1px solid  rgba(124, 124, 124, 0.31);
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

I want to change the 'padding' and 'font-size' for the search bar in page2. I did something like this:

.userpage-container.url-input{
  outline: none;
  padding:1rem;
  font-size: 1rem;
  width: 100%;
  background: #FFFFFF;
  mix-blend-mode: normal;
  border: 1px solid  rgba(124, 124, 124, 0.31);
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}

But this did not work out.Please help me out.Thanks for any kind of help.

`.userpage-container .url-input` - note the space...it's important — Paulie_D, May 07 '20 at 13:39

score 0 · Answer 1 · answered May 07 '20 at 13:40

.userpage-container.url-input selects elements that have both classes. You need to separate them with a space so that it selects elements with the class .url-input that are a descendant of elements with the class .userpage-container.

So .userpage-container .url-input

CSS SPECIFITY How to overrwrite styles for a class

1 Answers1