Can someone explain the statement: .Form textarea.ReadOnly:not(.Not_Valid)

I had help from another individual with my CSS a bit and had the following line used:  Can someone explain the statement: .Form textarea.ReadOnly:not(.Not_Valid).  I understand that this is trying to select a textarea html object inside a form, but what is the "ReadOnly:not(.Not_Valid)" all about?

That is when your element is editable.

If you set the property "enabled" to false, the css that you will see in the page is:

textarea[readonly="readonly"]

The following code is all the CSS that I have to select my form inputs. I first set the disabled object borders to #ccc and then set the enabled element borders to black. When I run the page. the borders on all input elements are black.



SyntaxEditor Code Snippet

/* Disabled ~ NotSelected -    Border:Gray, Text:Gray, Background:White */
.Form textarea[readonly="readonly"],
.Form select[readonly="readonly"],
.Form input[type=text]:read-only, 
.Form input[type=number]:read-only, 
.Form input[type=email]:read-only, 
.Form input[type=search]:read-only{
    color: #ccc;
    border-bottom-color: #ccc;
    border-top-color: #ccc;
    border-right-color: #ccc;
    border-left-color: #ccc;
    background-color: #f2eded;
}


/* Enabled ~ NotSelected ~ NotRequired -    Border:Black, Text: Black, Background:White */
.Form textarea.ReadOnly:not(.Not_Valid),                        /*  NOT WORKING  */
.Form select.ReadOnly:not(.Not_Valid),                          /*  NOT WORKING  */
.Form input[type=text]:enabled, 
.Form input[type=number]:enabled, 
.Form input[type=email]:enabled, 
.Form input[type=search]:enabled{
    color: black;
    border-bottom-color: black;
    border-top-color: black;
    border-right-color: black;
    border-left-color: black;
}

 

What you are saying makes sense and clears up some questions for me, but the .ReadOnly:not(.Not_Valid) always seems to override the [readonly="readonly"] even when I put the first section after second section.  I took a look at the html with Inspect and on the html element that I marked "enabled = false" in the property window, I don't see a readonly="readonly" in the inspect window for that object.  The saga continues.


Thanks for your help,

Paul

Sorry, I now see the readonly="readonly" in the inspect window, so now I don't know why the .Readonly:not(.Not_Valid) is overwriting it.

.Readonly:not(.Not_Valid) this comes from the Theme BaseTheme.

.Form input.ReadOnly:not(.Not_Valid), 
.Form textarea.ReadOnly:not(.Not_Valid), 
.Form select.ReadOnly:not(.Not_Valid) {
    border-color: #e2e2e2;
}

It means that if you want to change the border-color, you need to overwrite this rules. 

Hello Paul, 

As EFreitas hace mentioned, this comes from the base theme. 

The reason why it is overwritten your css is probably because of its specificity: https://www.w3schools.com/css/css_specificity.asp

So, to overwritten it, you need a more specific selector, or you need to use the same rule, later, with a different value for the desired attribute. 

In your case I think the first approach is probably what you want. 

Cheers