سلام. وقت بخیر
دقیقه 13 این تیکه داره توضیح داده می‌شه:

.tabbed label:hover,
.tabbed input:checked + label

1. .tabbed label:hover (خط 50):

.tabbed: این انتخابگر دنبال عنصری با کلاس tabbed می‌گرده (که اینجا div والد تب‌هاست).
label: سپس، تمام عناصر label داخل .tabbed رو انتخاب می‌کنه.
:hover: در نهایت، فقط labelهایی رو انتخاب می‌کنه که ماوس روی اونها قرار داره.
نتیجه: پس این انتخابگر به هر label تب، که ماوس روی اون می‌ره، استایل می‌ده.

2. .tabbed input:checked + label (خط 51):

.tabbed: مثل قبل، دنبال عنصر .tabbed می‌گرده.
input:checked: تمام عناصر input داخل .tabbed رو انتخاب می‌کنه که وضعیت checked (انتخاب شده) دارن.
+ label: بعد، فقط عنصر labelی رو انتخاب می‌کنه که دقیقاً بعد از عنصر input:checked قرار داره.
نتیجه: این انتخابگر فقط به label تب انتخاب شده استایل می‌ده.

اینجا، برای اطمینان از اینکه فقط label مربوط به input انتخاب شده استایل می‌گیره، از + استفاده می‌شه. بدون +، ممکن بود تمام labelها استایل بگیرن.

پس وقتی ماوس رو روی هر تب می‌برید، رنگ پس‌زمینه و متن اون تغییر می‌کنه (به دلیل label:hover).
وقتی یک تب رو انتخاب می‌کنید، فقط رنگ پس‌زمینه و متن همون تب تغییر می‌کنه (به دلیل input:checked + label).