Media queries and pseudo elements-CodePudding

For a project, I need to design and code a same website for computer(above 992px), tablet (between 992px and 768px) and smartphone (lower than 768px). Obviously to do that, I need to implement media queries. In my case, I decided to load a different stylesheet with media query:

<!--For everyone-->
<link href="css/computer.css" type="text/css" rel="stylesheet">
<!--For those with a resolution lower than 992px-->
<link href="css/tablet.css" type="text/css" rel="stylesheet" 
      media="screen and (max-width: 992px)">
<!--For those with a resolution lower than 768px-->
<link href="css/smartphone.css" type="text/css" rel="stylesheet" 
      media="screen and (max-width: 768px)">

In order to verify that everything works, I used a simple method: for each stylesheet I styled the text with a different color. Everything is ok and works, but I have a problem with my pseudo-elements. When I load another stylesheet, the pseudo-elements are not override but mixed together.

Here is an example:

Let's say we have the following button:

<a >Example</a>

In my computer.css, I have this pseudo-element:

.nav-button:hover {
    color: #0065FC;
    border-top: 2px solid #0065FC;
    padding-top: 30px;
}

In my smartphone.css, I have this same pseudo-element but styled in a different way:

.nav-button:hover {
    color: #0065FC;
    border-bottom: 2px solid #0065FC;
}

When my webpage, load computer.css stylesheet, there is no problem with my .nav-button:hover, but when I reduce my screen and load the smartphone.css stylesheet, the .nav-button:hover of computer.css and smartphone.css appears at the same time, I get something like that:

.nav-button:hover {
    color: #0065FC;
    border-top: 2px solid #0065FC;
    padding-top: 30px;
    border-bottom: 2px solid #0065FC;
}

So, I would like to ask how can I make my pseudo-elements not getting mixed together.

I thank in advance anyone who will take the time to help me;

CodePudding user response：

<link href="css/tablet.css" type="text/css" rel="stylesheet" 
      media="screen and (max-width: 992px)">
<link href="css/smartphone.css" type="text/css" rel="stylesheet" 
      media="screen and (max-width: 768px)">

You have a stylesheet that applies to all windows narrower than 992 pixels, and a stylesheet that applies to all windows narrower than 768 pixels.

Since all windows narrower than 768 pixels are also narrower than 992 pixels, any time the second stylesheet applies, the first one will too.

If you don't want:

border-top: 2px solid #0065FC;
padding-top: 30px;

…to apply to windows narrower than 768 pixels you have two choices:

Give them different values in your second stylesheet so the ones from the first stylesheet are overridden.
Change the media query for the first stylesheet so it has a min-width condition as well as a max-width condition so nothing in it applies to narrower screens.

CodePudding user response：

You can overwrite particular CSS properties.

You are applying colour: #0065FC; border-bottom: 2px solid #0065FC; in smartphone.css. But, border-top is also applied.

You can write a CSS just like below.

.nav-button:hover {
    color: #0065FC;
    border-bottom: 2px solid #0065FC;
    border-top: 0;
    padding-top: 30px; /*If you want to remove padding, you can replace 30px to 0;*/
}

Please check and revert.

CodePudding user response：

The order of css is important. If using the same selector, the last selector will be the one that is used.

This example below is not using seperate files but it demonstrates the order of your code.

.nav-button:hover {
  color: #0065FC;
  border-bottom: 2px solid #0065FC;
}
@media (min-width: 992px) {
  .nav-button:hover {
    border-width: 2px 0 0 0;
    padding-top: 30px;
  }
}

<a >Example</a>

CodePudding user response：

The order of css is important. If using the same selector, the last selector will be the one that is used.

This example below is not using seperate files but it demonstrates the order of your code.

.nav-button:hover {
  color: #0065FC;
  border: 2px solid #0065FC;
  border-width: 0 0 2px 0;
}
@media (min-width: 992px) {
  .nav-button:hover {
    border-width: 2px 0 0 0;
    padding-top: 30px;
  }
}

<a >Example</a>