仅 CSS 选项卡 - 如何仅在选项卡 2、3 和 4 被激活时向选项卡内容添加边框左上角半径？

Question

CSS only! Does anyone know how to trigger add an 8px radius to the top left of the .tab-content container only when tab 2, 3, or 4 are pressed and leave it without a radius when tab-1 is selected?

'border-top-left-radius: 8px;' is the code I need to execute, only when these mentioned tabs are selected and not the 1st tab.

I have tried many different approaches here relating to .tab-switch:checked and the same with .tab-content but cant get anything to fire.

 :root { --primary: #0062a4; --primary_med: #5084a7; --primary_dark: #24435c; --light: #ffffff; --dark: #000000; --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8); } .feedback { box-sizing: border-box; padding: 10px; font-size: 12px; border-radius: 10px; background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255)); border: 1px solid #000000; box-shadow: 2px 4px 8px; } .tabs { position: relative; margin: 0; } .tabs::before, .tabs::after { content: ""; display: table; } .tabs::after { clear: both; } .tab { float: left; Padding-top: 5px; padding-left: 10px; } .tab-switch { display: none; } .tab-label { position: relative; display: block; height: 34px; text-align: center; background: var(--primary_dark); color: #fff; cursor: pointer; padding: 5px 20px; font-size: 14px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .tab-switch:checked+.tab-label { background: var(--primary_med); color: var(--light); border-bottom: 0; z-index: 1; top: -0.0625rem; font-size: 16px; font-weight: 700; } .tab-content { height: 12rem; position: absolute; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; z-index: 1; top: 3.1em; left: 0; padding: 1.618rem; background: var(--primary_med); opacity: 0; height: 422px; width: 100%; } .tab-switch:checked+label+.tab-content { z-index: 2; opacity: 1; } .base-footer { gap: 10px; background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255)); border-radius: 10px; border: 1px solid #000000; box-shadow: 2px 4px 8px; }

 <div class="container"> <div class="tabs"> <div class="tab"> <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"> <label for="tab-1" class="tab-label">Tab 1</label> <div class="tab-content">Tab 1</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-2" class="tab-switch"> <label for="tab-2" class="tab-label">Tab 2</label> <div class="tab-content">Tab 2</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-3" class="tab-switch"> <label for="tab-3" class="tab-label">Tab 3</label> <div class="tab-content">Tab 3</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-4" class="tab-switch"> <label for="tab-4" class="tab-label">Tab 4</label> <div class="tab-content">Tab 4</div> </div> </div> </div>

I need a solution in CSS only please.

Answer 1

You could use the :not selector - what you want to select are the tabs that are checked but are not the first-child (of the .tabs element).

 :root { --primary: #0062a4; --primary_med: #5084a7; --primary_dark: #24435c; --light: #ffffff; --dark: #000000; --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8); } .feedback { box-sizing: border-box; padding: 10px; font-size: 12px; border-radius: 10px; background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255)); border: 1px solid #000000; box-shadow: 2px 4px 8px; } .tabs { position: relative; margin: 0; } .tabs::before, .tabs::after { content: ""; display: table; } .tabs::after { clear: both; } .tab { float: left; Padding-top: 5px; padding-left: 10px; } .tab-switch { display: none; } .tab-label { position: relative; display: block; height: 34px; text-align: center; background: var(--primary_dark); color: #fff; cursor: pointer; padding: 5px 20px; font-size: 14px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .tab-switch:checked+.tab-label { background: var(--primary_med); color: var(--light); border-bottom: 0; z-index: 1; top: -0.0625rem; font-size: 16px; font-weight: 700; } .tab-content { height: 12rem; position: absolute; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; z-index: 1; top: 3.1em; left: 0; padding: 1.618rem; background: var(--primary_med); opacity: 0; height: 422px; width: 100%; } .tab-switch:checked+label+.tab-content { z-index: 2; opacity: 1; } .tab:not(:first-child) .tab-switch:checked+label+.tab-content { border-top-left-radius: 8px; } .base-footer { gap: 10px; background-image: linear-gradient(to bottom right, rgb(23, 62, 136), rgb(0, 140, 255)); border-radius: 10px; border: 1px solid #000000; box-shadow: 2px 4px 8px; }

 <div class="container"> <div class="tabs"> <div class="tab"> <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"> <label for="tab-1" class="tab-label">Tab 1</label> <div class="tab-content">Tab 1</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-2" class="tab-switch"> <label for="tab-2" class="tab-label">Tab 2</label> <div class="tab-content">Tab 2</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-3" class="tab-switch"> <label for="tab-3" class="tab-label">Tab 3</label> <div class="tab-content">Tab 3</div> </div> <div class="tab"> <input type="radio" name="css-tabs" id="tab-4" class="tab-switch"> <label for="tab-4" class="tab-label">Tab 4</label> <div class="tab-content">Tab 4</div> </div> </div> </div>