回答編集履歴
6
CSSネストを使用しないように書き直した。
test
CHANGED
|
@@ -219,35 +219,34 @@
|
|
|
219
219
|
### 質問の変更を受けて追記
|
|
220
220
|
|
|
221
221
|
```css
|
|
222
|
-
@layer base {
|
|
222
|
+
@layer base {
|
|
223
|
-
table {
|
|
223
|
+
table {
|
|
224
|
-
background-color: ivory;
|
|
224
|
+
background-color: ivory;
|
|
225
|
-
}
|
|
225
|
+
}
|
|
226
|
-
|
|
226
|
+
|
|
227
|
-
.fm-x,
|
|
227
|
+
.fm-x,
|
|
228
|
-
.fm-y {
|
|
228
|
+
.fm-y {
|
|
229
|
-
background-color: wheat;
|
|
229
|
+
background-color: wheat;
|
|
230
|
-
}
|
|
230
|
+
}
|
|
231
|
-
}
|
|
231
|
+
}
|
|
232
|
-
|
|
232
|
+
|
|
233
|
-
.fm-cell {
|
|
233
|
+
.fm-cell {
|
|
234
|
-
transition: background-color 0.3s;
|
|
234
|
+
transition: background-color 0.3s;
|
|
235
|
-
|
|
235
|
+
}
|
|
236
|
+
|
|
236
|
-
|
|
237
|
+
.fm-cell:hover {
|
|
237
|
-
background-color: tomato;
|
|
238
|
+
background-color: tomato;
|
|
238
|
-
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
:where(tbody:has(.fm-cell:hover:nth-child(2))) td:nth-child(2),
|
|
242
|
+
:where(tbody:has(.fm-cell:hover:nth-child(3))) td:nth-child(3),
|
|
243
|
+
:where(tbody:has(.fm-cell:hover:nth-child(4))) td:nth-child(4),
|
|
244
|
+
:where(tbody:has(.fm-cell:hover:nth-child(5))) td:nth-child(5),
|
|
239
|
-
:where(t
|
|
245
|
+
:where(tbody:has(.fm-cell:hover:nth-child(6))) td:nth-child(6) {
|
|
240
246
|
background-color: gold;
|
|
241
247
|
}
|
|
242
248
|
|
|
243
|
-
|
|
244
|
-
:where(tbody:has(&:nth-child(2))) td:nth-child(2),
|
|
245
|
-
:where(tbody:has(&:nth-child(3))) td:nth-child(3),
|
|
246
|
-
:where(tbody:has(&:nth-child(4))) td:nth-child(4),
|
|
247
|
-
:where(tbody:has(&:nth-child(5))) td:nth-child(5),
|
|
248
|
-
:where(t
|
|
249
|
+
:where(tr:has(.fm-cell:hover)) td {
|
|
249
250
|
background-color: gold;
|
|
250
251
|
}
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
252
|
```
|
5
軽微な変更
test
CHANGED
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
|
|
219
219
|
### 質問の変更を受けて追記
|
|
220
220
|
|
|
221
|
-
```
|
|
221
|
+
```css
|
|
222
222
|
@layer base {
|
|
223
223
|
table {
|
|
224
224
|
background-color: ivory;
|
4
CSSのみに変更
test
CHANGED
|
@@ -219,37 +219,35 @@
|
|
|
219
219
|
### 質問の変更を受けて追記
|
|
220
220
|
|
|
221
221
|
```html
|
|
222
|
-
<style>
|
|
223
|
-
|
|
222
|
+
@layer base {
|
|
224
|
-
|
|
223
|
+
table {
|
|
225
|
-
|
|
224
|
+
background-color: ivory;
|
|
226
|
-
|
|
225
|
+
}
|
|
227
|
-
|
|
226
|
+
|
|
228
|
-
|
|
227
|
+
.fm-x,
|
|
229
|
-
|
|
228
|
+
.fm-y {
|
|
230
|
-
|
|
229
|
+
background-color: wheat;
|
|
231
|
-
|
|
230
|
+
}
|
|
232
|
-
|
|
231
|
+
}
|
|
233
|
-
|
|
232
|
+
|
|
234
|
-
|
|
233
|
+
.fm-cell {
|
|
235
|
-
|
|
234
|
+
transition: background-color 0.3s;
|
|
236
|
-
|
|
235
|
+
|
|
237
|
-
|
|
236
|
+
&:hover {
|
|
238
|
-
|
|
237
|
+
background-color: tomato;
|
|
239
|
-
|
|
238
|
+
|
|
240
|
-
|
|
239
|
+
:where(tr:has(&)) td {
|
|
241
|
-
|
|
240
|
+
background-color: gold;
|
|
242
|
-
|
|
241
|
+
}
|
|
243
|
-
|
|
244
|
-
|
|
242
|
+
|
|
243
|
+
|
|
245
|
-
|
|
244
|
+
:where(tbody:has(&:nth-child(2))) td:nth-child(2),
|
|
246
|
-
|
|
245
|
+
:where(tbody:has(&:nth-child(3))) td:nth-child(3),
|
|
247
|
-
|
|
246
|
+
:where(tbody:has(&:nth-child(4))) td:nth-child(4),
|
|
248
|
-
|
|
247
|
+
:where(tbody:has(&:nth-child(5))) td:nth-child(5),
|
|
249
|
-
|
|
248
|
+
:where(tbody:has(&:nth-child(6))) td:nth-child(6) {
|
|
250
|
-
|
|
249
|
+
background-color: gold;
|
|
251
|
-
|
|
250
|
+
}
|
|
252
|
-
|
|
251
|
+
}
|
|
253
|
-
|
|
252
|
+
}
|
|
254
|
-
</style>
|
|
255
253
|
```
|
3
コードの修正
test
CHANGED
|
@@ -220,13 +220,15 @@
|
|
|
220
220
|
|
|
221
221
|
```html
|
|
222
222
|
<style>
|
|
223
|
+
@layer base {
|
|
223
|
-
table {
|
|
224
|
+
table {
|
|
224
|
-
background-color: ivory;
|
|
225
|
+
background-color: ivory;
|
|
225
|
-
}
|
|
226
|
+
}
|
|
226
|
-
|
|
227
|
+
|
|
227
|
-
.fm-x,
|
|
228
|
+
.fm-x,
|
|
228
|
-
.fm-y {
|
|
229
|
+
.fm-y {
|
|
229
|
-
background-color: wheat;
|
|
230
|
+
background-color: wheat;
|
|
231
|
+
}
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
.fm-cell {
|
|
@@ -235,15 +237,16 @@
|
|
|
235
237
|
&:hover {
|
|
236
238
|
background-color: tomato;
|
|
237
239
|
|
|
238
|
-
:where(tr:has(&)
|
|
240
|
+
:where(tr:has(&)) td {
|
|
239
241
|
background-color: gold;
|
|
240
242
|
}
|
|
241
243
|
|
|
244
|
+
|
|
242
|
-
:where(tbody:has(&:nth-child(2))
|
|
245
|
+
:where(tbody:has(&:nth-child(2))) td:nth-child(2),
|
|
243
|
-
|
|
246
|
+
:where(tbody:has(&:nth-child(3))) td:nth-child(3),
|
|
244
|
-
|
|
247
|
+
:where(tbody:has(&:nth-child(4))) td:nth-child(4),
|
|
245
|
-
|
|
248
|
+
:where(tbody:has(&:nth-child(5))) td:nth-child(5),
|
|
246
|
-
|
|
249
|
+
:where(tbody:has(&:nth-child(6))) td:nth-child(6) {
|
|
247
250
|
background-color: gold;
|
|
248
251
|
}
|
|
249
252
|
}
|
2
軽微な変更
test
CHANGED
|
@@ -229,19 +229,23 @@
|
|
|
229
229
|
background-color: wheat;
|
|
230
230
|
}
|
|
231
231
|
|
|
232
|
-
.fm-cell
|
|
232
|
+
.fm-cell {
|
|
233
|
+
transition: background-color 0.3s;
|
|
234
|
+
|
|
235
|
+
&:hover {
|
|
233
|
-
background-color: tomato;
|
|
236
|
+
background-color: tomato;
|
|
234
|
-
|
|
237
|
+
|
|
235
|
-
:where(tr:has(&) .fm-cell) {
|
|
238
|
+
:where(tr:has(&) .fm-cell) {
|
|
236
|
-
background-color: gold;
|
|
239
|
+
background-color: gold;
|
|
237
|
-
}
|
|
240
|
+
}
|
|
238
|
-
|
|
241
|
+
|
|
239
|
-
:where(tbody:has(&:nth-child(2)) .fm-cell:nth-child(2),
|
|
242
|
+
:where(tbody:has(&:nth-child(2)) .fm-cell:nth-child(2),
|
|
240
|
-
tbody:has(&:nth-child(3)) .fm-cell:nth-child(3),
|
|
243
|
+
tbody:has(&:nth-child(3)) .fm-cell:nth-child(3),
|
|
241
|
-
tbody:has(&:nth-child(4)) .fm-cell:nth-child(4),
|
|
244
|
+
tbody:has(&:nth-child(4)) .fm-cell:nth-child(4),
|
|
242
|
-
tbody:has(&:nth-child(5)) .fm-cell:nth-child(5),
|
|
245
|
+
tbody:has(&:nth-child(5)) .fm-cell:nth-child(5),
|
|
243
|
-
tbody:has(&:nth-child(6)) .fm-cell:nth-child(6)) {
|
|
246
|
+
tbody:has(&:nth-child(6)) .fm-cell:nth-child(6)) {
|
|
244
|
-
background-color: gold;
|
|
247
|
+
background-color: gold;
|
|
248
|
+
}
|
|
245
249
|
}
|
|
246
250
|
}
|
|
247
251
|
</style>
|
1
質問の変更を受けて追記
test
CHANGED
|
@@ -213,3 +213,36 @@
|
|
|
213
213
|
|
|
214
214
|
</html>
|
|
215
215
|
```
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
### 質問の変更を受けて追記
|
|
220
|
+
|
|
221
|
+
```html
|
|
222
|
+
<style>
|
|
223
|
+
table {
|
|
224
|
+
background-color: ivory;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.fm-x,
|
|
228
|
+
.fm-y {
|
|
229
|
+
background-color: wheat;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.fm-cell:hover {
|
|
233
|
+
background-color: tomato;
|
|
234
|
+
|
|
235
|
+
:where(tr:has(&) .fm-cell) {
|
|
236
|
+
background-color: gold;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
:where(tbody:has(&:nth-child(2)) .fm-cell:nth-child(2),
|
|
240
|
+
tbody:has(&:nth-child(3)) .fm-cell:nth-child(3),
|
|
241
|
+
tbody:has(&:nth-child(4)) .fm-cell:nth-child(4),
|
|
242
|
+
tbody:has(&:nth-child(5)) .fm-cell:nth-child(5),
|
|
243
|
+
tbody:has(&:nth-child(6)) .fm-cell:nth-child(6)) {
|
|
244
|
+
background-color: gold;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
</style>
|
|
248
|
+
```
|