Kevin Powell - Community•2y ago

Create a div with no content then add a border when content is created or added to it?

So that is what I am trying to do. I have been searching for it because I thought I saw it but can't find an answer. Is there a way to do this with just SCSS?

12 Replies

althepal78•2y ago

with out javasctipt is ther a way?

vince•2y ago

Sounds like a perfect job for javascript

MarkBoots•2y ago

div{
  border: 1px solid red;
}
div:empty {
  border: none;
}

div{
  border: 1px solid red;
}
div:empty {
  border: none;
}

or shorter

div:not(:empty) {
  border: 1px solid red;
}

div:not(:empty) {
  border: 1px solid red;
}

althepal78•2y ago

I was trying to see if I could do it without js for real it is that simple? this is css?

MarkBoots•2y ago

this is normal css yes. but be careful, because you can not have spaces or linebreaks inside the tags https://developer.mozilla.org/en-US/docs/Web/CSS/:empty this is empty

<div></div>

<div></div>

these are not

<div>
</div>
<!--or-->
<div> </div>

<div>
</div>
<!--or-->
<div> </div>

:empty - CSS: Cascading Style Sheets | MDN

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

StefanH•2y ago

Kevin talked about :empty here https://youtube.com/shorts/zoJkZ7GC1s4?feature=share

Kevin Powell

YouTube

Don’t use JS for that - Part 1

#Shorts Don’t use JS for that - Part 1 #css #javascript #webdev #webdevelopment

althepal78•2y ago

thanks I just needed to word it right because I need to get better at googling lol I don't know it is not working either way

MarkBoots•2y ago

then you'll have to provide some code. Make a sample codepen with what you want it to work with (just the parts that matter)

althepal78•2y ago

yeah I will later thank you, I will try it on a vs code first then this section because I am using .net but I have to go now thanks a lot

.validation:not(:empty){
    border: 2px solid yellow;
    color: $color-pink;  
}

.validation:not(:empty){
    border: 2px solid yellow;
    color: $color-pink;  
}

althepal78•2y ago

althepal78•2y ago

nothing inside I checked and still the same thing, no whitespace nothing checked with dev tools too I guess something simple might be inside I over looked

StefanH•2y ago

What version of brave are you using?

Gaming

Programming

Create a div with no content then add a border when content is created or added to it?