Question 45846 in CSS Question posted in
Some basic documentation can be found here.

CSS – meaning of "old" in :not(old) (used with checkboxes and radio buttons)

I am reviewing a code project I found. It is an HTML Forms exercise. In the CSS, it uses :not(old) several times, always in connection with checkboxes and radio buttons. The code does not actually use the word "old" in the HTML. I have searched the Internet but cannot come up with an explanation of what "old" means. However, that search has been fruitless because Google search can’t seem to recognize that I am looking for the word "old" as a CSS value, as opposed to the word "old" as being used in everyday language. Can someone here tell me what "old" represents?

Here’s the CSS:

* {
    margin: 0;
    padding: 0;
    font-family: "Nanum Myeongjo", serif;
}

body {
    background-image: url("vector-speaker-1680x1050.jpg");
    width: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
    color: white;
}

h1 {
    text-align: center;
    margin: 20px;
    font-family: 'Kumbh Sans', sans-serif;
}

p {
    width: 80%;
    margin: auto;
}

fieldset {
    width: 80%;
    margin: auto;
    border-radius: 20px;
    clear: left;
}

legend {
    margin: 20px;
}

div {
    width: 80%;
    margin: auto;
}

input[type="text"],
input[type="email"] {
    margin-bottom: 20px;
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old) {
    width: 2em;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0;
}

.enterInfo {
    float: left;
    clear: left;
    width: 100px;
}

input[type=checkbox]:not(old) + label,
input[type=radio  ]:not(old) + label {
    display: inline-block;
    margin-left: -2em;
    line-height: 1.5em; 
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span {
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    margin: 0.25em 0.5em 0.25em 0.25em;
    border: 0.0625em solid rgb(192,192,192);
    border-radius: 0.25em;
    background: rgb(224,224,224);
    background-image: -moz-linear-gradient(rgb(240,240,240), rgb(224,224,224));
    background-image: -ms-linear-gradient(rgb(240,240,240), rgb(224,224,224));
    background-image: -o-linear-gradient(rgb(240,240,240), rgb(224,224,224));
    background-image: -webkit-linear-gradient(rgb(240,240,240), rgb(224,224,224));
    background-image: linear-gradient(rgb(240,240,240), rgb(224,224,224));
    vertical-align: bottom;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span {
    background-image: -moz-linear-gradient(rgb(224,224,224), rgb(240,240,240));
    background-image: -ms-linear-gradient(rgb(224,224,224), rgb(240,240,240));
    background-image: -o-linear-gradient(rgb(224,224,224), rgb(240,240,240));
    background-image: -webkit-linear-gradient(rgb(224,224,224), rgb(240,240,240));
    background-image: linear-gradient(rgb(224,224,224), rgb(240,240,240)
    );
}

input[type=checkbox]:not(old):checked  + label >span:before{
    content: "2713 ";
    display: block;
    width: 1em;
    color: rgb(153,204,102);
    font-size: 0.875em;
    line-height: 1em;
    text-align: center;
    text-shadow: 0 0 0.0714em rgb(115,153,77);
    font-weight: bold;
}

input[type=radio]:not(old):checked  + label > span > span {
    display: block;
    width: 0.5em;
    height: 0.5em;
    margin: 0.125em;
    border: 0.0625em solid rgb(115,153,77);
    border-radius: 0.125em;
    background: rgb(153,204,102);
    background-image: -moz-linear-gradient(rgb(179,217,140), rgb(153,204,102));
    background-image: -ms-linear-gradient(rgb(179,217,140), rgb(153,204,102));
    background-image: -o-linear-gradient(rgb(179,217,140), rgb(153,204,102));
    background-image: -webkit-linear-gradient(rgb(179,217,140), rgb(153,204,102));
    background-image: linear-gradient(rgb(179,217,140), rgb(153,204,102));
}

Here is the HTML, just in case:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Music Survey</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">      
        <link rel="stylesheet" href="music_survey.css">
    </head>
    <body>
        <header>
            <h1>iTunesGifts<br>Music Survey</h1>
            <p>Congratulations! You are one step away from your $100 iTunes Gift Card! Just complete the following survey and you will qualify!</p><br>
            
            <p>Completing the following survey you will enable us to customize the music offers we send to you each week. Please be assured that your information will be kept private and will not be shared with any other organization.</p><br>
        </header>
        <form method="post" action="https://www.notareallink.net/webresources/cgi-bin/formmail.asp">
        
            <p><label for="fname" class="enterInfo">First Name: <input type="text" name="fname" id="fname" required></label></p>
            <p><label for="lname" class="enterInfo"> Last Name: <input type="text" name="lname" id="lname" required></label></p>
            <p><label for="email" class="enterInfo">E-mail: <input type="email" name="email" id="email" required></label></p><br>
        
            <fieldset>
                <legend>Select Your Favorite Types of Music:</legend>
                <input type="checkbox" name="pop" id="pop" value="yes"><label for="pop"><span><span></span></span>Pop</label><br>
                <input type="checkbox" name="classical"  id="classical" value="yes"><label for="classical"><span><span></span></span>Classical</label><br>
                <input type="checkbox" name="rock" id="rock" value="yes"><label for="rock"><span><span></span></span>Rock</label><br>
                <input type="checkbox" name="folk" id="folk" value="yes"><label for="folk"><span><span></span></span>Folk</label><br>
                <input type="checkbox" name="rap" id="rap" value="yes"><label for="rap"><span><span></span></span>Rap</label><br>
                <input type="checkbox" name="other" id="other" value="yes"><label for="other"><span><span></span></span>Other</label><br><br>
            </fieldset><br>
            <fieldset>
                <legend>Select how often you purchase Music CDs:</legend>
                <input type="radio" name="purchFreq" id="purchWeekly" value="weekly"><label for="purchWeekly"><span><span></span></span>Weekly</label><br>
                <input type="radio" name="purchFreq" id="purchFew" value="few"><label for="purchFew"><span><span></span></span>A few CDs each year</label><br>
                <input type="radio" name="purchFreq" id="purchMonthly" value="monthly"><label for="purchMonthly"><span><span></span></span>Monthly</label><br>
                <input type="radio" name="purchFreq" id="purchNever" value="never"><label for="purchNever"><span><span></span></span>Never Purchase</label><br><br>
            </fieldset><br>    
            <p>Select the method you use most often to purchase Music:<br> 
                <select size="1" name="accesstype">
                    <option value="empty"></option>
                    <option value="online">Online</option>
                    <option value="retail">Retail Store</option>
                    <option value="other">Other</option>
                </select><br><br>
            </p>
            <p>What role does music play in your life?<br>
            <textarea name="comments" cols="60" rows="5"></textarea></p><br>
            <div>
                 <input id="mySubmit" type="submit" value="Submit">
                <input type="reset" value="Clear form"></div><br>
                <input type="hidden" name="recipient" value="[email protected]">
                <input type="hidden" name="subject" value="Music Survey">
                <input name="return_link_url" type="hidden" value="http://student.notareallink.net/~student/module7/music_survey.html">
                <input type="hidden" name="return_link_title" value="Return to Survey">
                <input type="hidden" name="background" value="vector-speaker-1680x1050.jpg">
                <input type="hidden" name="bgcolor" value="black">
                <input type="hidden" name="text_color" value="white">
                <input type="hidden" name="font_face" value="Times New Roman">
                <input type="hidden" name="font_size" value="2em">
            </form>
        <footer>
            <a href="mailto:[email protected]">[email protected]</a>
        </footer>

      </body>
</html>
Tags:

2

Answers


  1. 0

    The :not() CSS pseudo-class is used to select elements that do not match a specific selector. The :not(old) selector in the CSS code you mentioned is used to select elements that do not have the old class.

    If, your HTML code does not mention any class called old, I don’t think there is any point in keeping :not(old) in the CSS file i.e., removing it does not change anything.

    Login or Signup to reply.
  2. 0

    Feel free to delete this one :not(old) because a <input> element cannot be an element at the same time <old>. Because this is exactly what is indicated in the code you provided.
    Perhaps someone wanted to specify a class :not(.old), but forgot to add ..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search