locked
apply not to attribute selector RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this CSS selector:

    [class*=col] input[type="text"] {
         border: 1px solid #ddd;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-size: 13px;
        padding: 5px;
        min-width:100%;
        margin-bottom:10px;
    }
    <div class="col-lg-12 not-full-length">
        <asp:TextBox ID="txtName" runat="server" MaxLength="50"></asp:TextBox>
    </div>

    I would like to include a not pseudo-class. Something like 

    [class*=col]:not([class=".not-full-length"]) input[type="text"] {
         border: 1px solid #ddd;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-size: 13px;
        padding: 5px;
        min-width:100%;
        margin-bottom:10px;
    }

    This doesn't seem to work. Any idea how I could add that?

    Thanks

    Tuesday, November 28, 2017 12:49 AM

Answers

  • User1400794712 posted

    Hi asplearning,<sub></sub><sup></sup>

    It needs us to modify the selector from [class*=col] to [class*=col-].(It is '-' affects the result.)

    <style>
        [class*=col-]:not(.not-full-length) input[type="text"] {
            border: 1px solid #ddd;
            -moz-border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 13px;
            padding: 5px;
            min-width: 100%;
            margin-bottom: 10px;
        }
    </style>

    Best Regards,

    Daisy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 29, 2017 3:03 AM

All replies

  • User2103319870 posted

    apply not to attribute selector

    You can try with below css. This css will apply the styles to all div which doesnt have 'not-full-length' class in it

    Css

    div:not(.not-full-length) input[type="text"] {
         border: 1px solid #ddd;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-size: 13px;
        padding: 5px;
        min-width:100%;
        margin-bottom:10px;
    }
    
    Tuesday, November 28, 2017 1:51 AM
  • User2108892867 posted

    a2h, is it possible to use the col class attribute? I use bootstrap grid system and use them in many places. Using Div may affect my other div that I may miss adding .not-full-length.

    Thanks

    Tuesday, November 28, 2017 2:05 AM
  • User1400794712 posted

    Hi asplearning,

    It’s possible. You just need to modify a2h’s code to:

    <style>
        [class*=col]:not(.not-full-length) input[type="text"] {
            border: 1px solid #ddd;
            -moz-border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 13px;
            padding: 5px;
            min-width: 100%;
            margin-bottom: 10px;
        }
    </style>
    <body>     <form id="form1" runat="server">         <div class="col-lg-12 not-full-length">             <asp:TextBox ID="txtName" runat="server" MaxLength="50"></asp:TextBox>         </div>         <div class="col-lg-12">             <asp:TextBox ID="TextBox1" runat="server" MaxLength="50"></asp:TextBox>         </div>     </form> </body>

    Best Regards,

    Daisy

    Tuesday, November 28, 2017 9:34 AM
  • User2108892867 posted

    Thanks X.Daisy. That's weird. I tried it in JS fiddle and it works. But when I tried it in my app, the 100% width still applied. Not sure why. I used the developer tool to inspect, I can see the new class is there. If I add a new page without the master page, it works. But with the master page, it doesn't work anymore. It's still 100% width. Do you know why? 

    Tuesday, November 28, 2017 11:07 PM
  • User1400794712 posted

    Hi asplearning,<sub></sub><sup></sup>

    It needs us to modify the selector from [class*=col] to [class*=col-].(It is '-' affects the result.)

    <style>
        [class*=col-]:not(.not-full-length) input[type="text"] {
            border: 1px solid #ddd;
            -moz-border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 13px;
            padding: 5px;
            min-width: 100%;
            margin-bottom: 10px;
        }
    </style>

    Best Regards,

    Daisy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 29, 2017 3:03 AM
  • User2108892867 posted

    Thank you. Can't believe it. This has taken me so long and it's because of a dash. Out of curiosity, do you why is the dash a problem? 

    Thursday, November 30, 2017 3:24 AM
  • User1400794712 posted

    Hi asplearning,

    Actually, I don't find the cause. And I find that if we use class^=, it can match both 'col' and 'col-'. If you want to match the class which is start with 'col', I think it's better to use 'class^=' selector.

    Best Regards,
    Daisy

    Friday, December 1, 2017 10:35 AM