Today was the first day of my medication change and now I feel all tweaked out. Like I have had more than one cup of coffee. The kids have been busy today with laundry and cleaning. It’s funny that I call Karissa a ‘kid’ when she isn’t one. But she will always be my ‘kid’. All the kids will still be a ‘kid’ in my eyes. I’ve just been listening to music while coding. I have these nice chocolates that I got for Valentine’s Day that I want to eat but the question is should I eat them? I mean, chocolate has caffeine, right? I don’t think I should have any caffeine right now. But then, how much caffeine can be found in one little piece of chocolate? I think I will have one. I’ve had like one a day. I’ve been sharing them too cause it’s a lot! It is 52 degrees outside right now. Wow, that’s warm. All the snow has melted.
Ok, for today’s notes. More CSS to confuse us:
The calc() function is a CSS function that allows you to calculate a value based on other values. For example, you can use it to calculate the width of the viewport minus the margin of an element:
.example {
margin: 10px;
width: calc(100% - 20px);
}
The span[class] syntax will target any span element that has a class attribute set, regardless of the attribute’s value.
#years span[class] {
}
The :not() pseudo-selector is used to target all elements that do not match the selector.
span:not(.sr-only) {
}
Rather than having to constantly double-check that you are not overwriting your earlier properties, you can use the !important keyword to ensure these properties are always applied, regardless of order or specificity.
span[class~="sr-only"] {
border: 0 !important;
}
collapse, which will allow cell borders to collapse into a single border, instead of a border around each cell.
table {
border-collapse: collapse;
border: 0;
}
The [attribute=”value”] selector targets any element that has an attribute with a specific value.
tr[class="total"] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
The key difference between tr[class=”total”] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total.
The :nth-of-type() pseudo-selector is used to target specific elements based on their order among siblings of the same type.
tr.total td:nth-of-type(3) {
padding: 0.5rem;
}
