asp attribute span not getting styled like plain span

Why is it that only the plain span is being styled and not the asp span? How can I fix this?
<span class="danger" asp-validation-for="SomeModel.Number"></span>
<span class="danger">some span</span>
<span class="danger" asp-validation-for="SomeModel.Number"></span>
<span class="danger">some span</span>
span.field-validation-error,
.field-validation-error,
.danger,
span {
background: green;
}

.danger {
color: yellow;
}
span.field-validation-error,
.field-validation-error,
.danger,
span {
background: green;
}

.danger {
color: yellow;
}
19 Replies
greyfox
greyfox•5w ago
what does it look like in dev tools?
King TMK 🎗
King TMK 🎗OP•5w ago
This is what the asp span is being rendered as in the browser
<span class="danger field-validation-error" data-valmsg-for="SomeModel.Number" data-valmsg-replace="true">This field is required.</span>
<span class="danger field-validation-error" data-valmsg-for="SomeModel.Number" data-valmsg-replace="true">This field is required.</span>
It's also happening when I try to style a regular button tag by applying a class to it (I put the styles in wwwroot/css/button.css and link it in the _Layout.cshtml file) The only style that is currently being added to the button is the style I have for .button:hover, and not .button
greyfox
greyfox•5w ago
It's probably just that something is wrong with your css selector. When you select the span in dev tools, what does the styles tab look like? the ASP is compiled server side, the CSS is client side. Which style is being applied? background green, backgrund yellow, or neither?
King TMK 🎗
King TMK 🎗OP•5w ago
No styles are being applied to it at all Only to the plain span, which gets a green background
King TMK 🎗
King TMK 🎗OP•5w ago
No description
greyfox
greyfox•5w ago
show the styles tab in dev tools what styles are actually being applied to the span you're having trouble with
King TMK 🎗
King TMK 🎗OP•5w ago
This is all that's showing when selecting the asp span
No description
No description
greyfox
greyfox•5w ago
have you cleared the cache? Hit control+f5 a bunch of times?
King TMK 🎗
King TMK 🎗OP•5w ago
I can try, but I already changed machines
greyfox
greyfox•5w ago
Can you see the stylesheet with that style in the dev tools
King TMK 🎗
King TMK 🎗OP•5w ago
Seems like it's adding its own modularization technique at the end of the class name
/* _content/RazorPagesAzure/Pages/Form.cshtml.rz.scp.css */
/*.myform {
background: gray;
}
*/

span.field-validation-error[b-crk0b8nylx],
.field-validation-error[b-crk0b8nylx],
.danger[b-crk0b8nylx],
span[b-crk0b8nylx] {
background: green;
}

.danger[b-crk0b8nylx] {
color: yellow;
}
/* _content/RazorPagesAzure/Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-xgtppu45nf] {
white-space: normal;
text-align: center;
word-break: break-all;
}

a[b-xgtppu45nf] {
color: #0077cc;
}

.btn-primary[b-xgtppu45nf] {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

.nav-pills .nav-link.active[b-xgtppu45nf], .nav-pills .show > .nav-link[b-xgtppu45nf] {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

.border-top[b-xgtppu45nf] {
border-top: 1px solid #e5e5e5;
}
.border-bottom[b-xgtppu45nf] {
border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-xgtppu45nf] {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-xgtppu45nf] {
font-size: 1rem;
line-height: inherit;
}

.footer[b-xgtppu45nf] {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
/* _content/RazorPagesAzure/Pages/Form.cshtml.rz.scp.css */
/*.myform {
background: gray;
}
*/

span.field-validation-error[b-crk0b8nylx],
.field-validation-error[b-crk0b8nylx],
.danger[b-crk0b8nylx],
span[b-crk0b8nylx] {
background: green;
}

.danger[b-crk0b8nylx] {
color: yellow;
}
/* _content/RazorPagesAzure/Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand[b-xgtppu45nf] {
white-space: normal;
text-align: center;
word-break: break-all;
}

a[b-xgtppu45nf] {
color: #0077cc;
}

.btn-primary[b-xgtppu45nf] {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

.nav-pills .nav-link.active[b-xgtppu45nf], .nav-pills .show > .nav-link[b-xgtppu45nf] {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}

.border-top[b-xgtppu45nf] {
border-top: 1px solid #e5e5e5;
}
.border-bottom[b-xgtppu45nf] {
border-bottom: 1px solid #e5e5e5;
}

.box-shadow[b-xgtppu45nf] {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy[b-xgtppu45nf] {
font-size: 1rem;
line-height: inherit;
}

.footer[b-xgtppu45nf] {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
How am I supposed to select this span It seems like the modularization thing is only applied to cshtml.css files, which is why it works to style the field-validation-error class in wwwroot/css/site.css for example and not in the Form.cshtml.css The asp span isn't getting the [b-crk0b8nylx] attribute applied to it, only the plain span does...
greyfox
greyfox•5w ago
must be an attribute somewhere to force it to be added ngl I don't typically do things this way myself, so haven't had to deal with this problem
King TMK 🎗
King TMK 🎗OP•5w ago
How do you usually do it
greyfox
greyfox•5w ago
Not page-specific stylesheets like that anyways as that makes it quite difficult to maintain a consistent theme throughout an application. Now bear in mind I've been doing enterprise stuff for most of my career, so MVC4/5 and some core web stuff. Now you do have to have some page-specific styles, but I try to limit that as much as possible.
King TMK 🎗
King TMK 🎗OP•5w ago
I wouldn't say I'm married to having page specific styles, so how would you do it? The project will only have 2-3 pages
greyfox
greyfox•5w ago
I'd just put it into wwwroot/css/site.css
King TMK 🎗
King TMK 🎗OP•5w ago
How about when there are a lot of styles, would you put it in folders under wwwroot/css? or in multiple files rather
greyfox
greyfox•5w ago
Yes, multiple files. If there are multiple modules, create a subfolder and place the stylesheets in there.
King TMK 🎗
King TMK 🎗OP•5w ago
Alright, thank you
Want results from more Discord servers?
Add your server