My css code in Word Press is working for every other page in the website when i only want it to work for 1 page

I have currently made a code in CSS, which I wanted for a particular page but unfortunately, it is working for every other page as well and it makes the other pages look quite broken since the formatting of them goes very odd.

The solutions I have tried so far are:

Using the unique code of the page and making it something like this – * .post-id-17 .stop {code here} But I got no results from using this solution.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>CountDown</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>CountDown</h1>
    </header>
    <div class="content">
        <div class="counter"></div>
        <input type="number" id="seconds" placeholder="Seconds">
        <div class="buttons">
            <button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
            <button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
            <button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
            <button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
        </div>
    </div>
    <script type="text/javascript" src="main.js"></script>

</body>
</html>

Here is the CSS code:

* .post-id-706 .stop {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html, body{
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background: linear-gradient(to left top, #0045D6, #00A9f6);
}

header{
    width: 100%;
    height: 13vh;
    background-color: #fff;
    color: #0045F6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content{
    width: 100%;
    height: 60vh;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content #seconds{
    width: 250px;
    font-size: 2rem;
    padding: 1rem;
    outline: none;
    background: none;
    border: none;
    border-bottom: 3px solid #fff;
    color: #000000;
}

#seconds::placeholder{
    color: #ddd;
    font-size: 1.7rem;
}

.btn{
    background-color: #fff;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0.8rem 1.7rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.start{
    color: #1f0;
}

.stop{
    color: #E00;
}

#start, #stop, #continue{
    display: none;
}

.counter{
    color: #000000;
}

Here is the javascript code:

const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');

var seconds;
var remseconds;
var minuts;
var toCount = false;

function toSubmit(){
    display('start');
    remove('seconds');
    remove('ok');
    seconds = Number(secInput.value);
    counting();
}

function display(e){
    document.getElementById(e).style.display = 'block';
}

function remove(e){
    document.getElementById(e).style.display = 'none';
}

function check(stat){
    if(stat.id == "start"){
        display("stop");
        remove("start");
        toCount = true;
    }
    else if(stat.id == "stop"){
        display("continue");
        remove("stop");
        toCount = false
    }
    else{
        display("stop");
        remove("continue");
        toCount =true;
    }
}

function count(){
    if(seconds > 0){
        if(toCount == true){
            seconds--;
            remseconds = seconds % 60;
            minuts = Math.floor(seconds / 60);

            if(minuts < 10){
                minuts = "0" + minuts;
            }

            if(remseconds < 10){
                remseconds = "0" + remseconds;
            }

            container.innerHTML = minuts + " : " + remseconds;
        }
    }
    else{
        container.innerHTML = "DONE!";
        buttonsDiv.style.opacity = "0";
    }
}

function counting(){
    remseconds = seconds % 60;
    minuts = Math.floor(seconds / 60);


    if(remseconds < 10){
        remseconds = "0" + remseconds;
    }

    container.innerHTML = minuts + " : " + remseconds;
    setInterval(count, 1000);
}

If you have any ideas in order to solve this issue please let me know.

Answer

You can add a class to the page where you want to apply CSS, and change all CSS with reference to that class. for example:

<html class="some-class">
...<your code>
</html>

CSS:

.some-class <your-selector>{
    <your css>
}

Advertisement

Answer