I am trying to convert some plain CSS to SCSS so I can take advantage of nesting. The code below is an example of where I want to define styles for a bunch of form field input types. In the plain CSS below, I'm setting the default, plus the :focus state of the fields. Except for one particular form field (a search field in my global header), where I'm using the :not negation pseudo-class selector.
input.text,
input.title,
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
select,
textarea {
border: 2px solid #c3cbd6;
}
input.text:focus,
input.title:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:not(div.global-search > form > div > input.et_pb_s):focus,
select:focus,
textarea:focus {
border: 2px solid #008ed4;
}
And here is my conversion to nested SCSS for the first block:
input.text,
input.title,
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
select,
textarea {
border: 2px solid #c3cbd6;
&:focus {
border: 2px solid #008ed4;
}
}
But the second CSS block is trickier to convert to SCSS, because I'm making an exception using the :not selector to exclude the search field from having a focus state like all the other forms.
How can I do this in SCSS?
Separate the SCSS for input[type=text], and write it with the :not selector
input.text,
input.title,
input[type=email],
input[type=password],
input[type=tel],
select,
textarea {
border: 2px solid #c3cbd6;
&:focus {
border: 2px solid #008ed4;
}
}
input[type=text] {
&:not(div.global-search > form > div > input.et_pb_s) {
&:focus {
border: 2px solid #008ed4;
}
}
}