--- id: 62017f47c87be96457c49f46 title: Step 46 challengeType: 0 dashedName: step-46 --- # --description-- Rather than having to constantly double-check 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. Give each property in your `span[class~="sr-only"]` selector an `!important` keyword. Do not change any of the values. # --hints-- Your `span[class~="sr-only"]` selector should have the `border` property set to `0 !important`. ```js // log it const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important')); ``` Your `span[class~="sr-only"]` selector should have the `clip` property set to `rect(1px, 1px, 1px, 1px) !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;')); ``` Your `span[class~="sr-only"]` selector should have the `clip-path` property set to `inset(50%) !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('clip-path: inset(50%) !important;')); ``` Your `span[class~="sr-only"]` selector should have the `-webkit-clip-path` property set to `inset(50%) !important`. ```js // this one gets removed apparently assert(code.includes('-webkit-clip-path: inset(50%) !important;')); ``` Your `span[class~="sr-only"]` selector should have the `height` property set to `1px !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('height: 1px !important;')); ``` Your `span[class~="sr-only"]` selector should have the `width` property set to `1px !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('width: 1px !important;')); ``` Your `span[class~="sr-only"]` selector should have the `position` property set to `absolute !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('position: absolute !important;')); ``` Your `span[class~="sr-only"]` selector should have the `overflow` property set to `hidden !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('overflow: hidden !important;')); ``` Your `span[class~="sr-only"]` selector should have the `white-space` property set to `nowrap !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('white-space: nowrap !important;')); ``` Your `span[class~="sr-only"]` selector should have the `padding` property set to `0 !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('padding: 0px !important;')); ``` Your `span[class~="sr-only"]` selector should have the `margin` property set to `-1px !important`. ```js const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; assert(text.includes('margin: -1px !important;')); ``` # --seed-- ## --seed-contents-- ```html Balance Sheet

AcmeWidgetCorp Balance Sheet

Assets
2019 2020 2021
Cash This is the cash we currently have on hand. $25 $30 $28
Checking Our primary transactional account. $54 $56 $53
Savings Funds set aside for emergencies. $500 $650 $728
Total Assets $579 $736 $809
Liabilities
2019 2020 2021
Loans The outstanding balance on our startup loan. $500 $250 $0
Expenses Annual anticipated expenses, such as payroll. $200 $300 $400
Credit The outstanding balance on our credit card. $50 $50 $75
Total Liabilities $750 $600 $475
Net Worth
2019 2020 2021
Total Net Worth $-171 $136 $334
``` ```css --fcc-editable-region-- span[class~="sr-only"] { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); -webkit-clip-path: inset(50%); height: 1px; width: 1px; position: absolute; overflow: hidden; white-space: nowrap; padding: 0; margin: -1px; } --fcc-editable-region-- html { box-sizing: border-box; } body { font-family: sans-serif; color: #0a0a23; } h1 { max-width: 37.25rem; margin: 0 auto; padding: 1.5rem 1.25rem; } h1 .flex { display: flex; flex-direction: column-reverse; gap: 1rem; } h1 .flex span:first-of-type { font-size: 0.7em; } h1 .flex span:last-of-type { font-size: 1.2em; } section { max-width: 40rem; margin: 0 auto; border: 2px solid #d0d0d5; } #years { display: flex; justify-content: flex-end; position: sticky; top: 0; background: #0a0a23; color: #fff; z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } #years span[class] { font-weight: bold; width: 4.5rem; text-align: right; } .table-wrap { padding: 0 0.75rem 1.5rem 0.75rem; } span:not(.sr-only) { font-weight: normal; } ```