# Ellentmondó stílusok: melyik osztály nyer?

> Hogyan dönti el a V4 szerkesztő, melyik osztály stílusa érvényesül, mit jeleznek a színes pontok, és hogyan látod meg, honnan jön egy érték.

A V4 szerkesztőben a stílusozás az osztályokra épül. Az osztályokkal újrahasznosíthatod a stílusokat, ami gyorsabbá teszi a munkát. Előfordulhat azonban, hogy egy elemhez ellentmondó stílusokat adsz hozzá: például az egyik osztály zöldre, a másik pirosra állítja a szöveg színét. A szerkesztő az alábbi szabályok szerint dönti el, melyik érvényesül. Az osztályok létrehozásáról a [Stílusosztályok](https://hub.hellowp.io/hu/plugins/elementor/stilus-osztalyok/) fejezetben olvashatsz.

## Az osztályok sorrendje

Az elem **Stílus** fülének tetején az **Osztályok** mező látható. Ebben szerepel az elemre érvényes összes osztály neve.

- A **helyi** osztály különleges: minden elemnek van egy saját, csak rá vonatkozó helyi osztálya. Ha még nem adtál meg benne stílust, az elem az alapértelmezett beállításokat használja.
- A mezőben a bal oldali osztályok elsőbbséget élveznek a jobb oldaliakkal szemben. Ha később adsz hozzá egy osztályt, az is a korábbi elé kerülhet, ha az osztálykezelőben előrébb áll.
- A helyi osztály mindig a legelső (bal szélső), ezért mindig ez a legerősebb: amit a helyi osztályban állítasz be, az felülír minden más osztályt.

A közös osztályok sorrendjét az **Osztálykezelőben** állíthatod. Az, amelyik ott feljebb áll, elsőbbséget élvez az alatta lévővel szemben. Lásd: [Osztálykezelő](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-osztalykezelo/).

## A színes pontok: honnan jön az érték?

Azok a beállítások, amelyeknek van értéke, egy kis színes pontot (jelzőt) kapnak. Ha egy szekciót, például a **Tipográfiát** becsukod, a pont a szekció neve mellett jelenik meg. Egy szekció neve mellett több pont is lehet, mert a benne lévő beállítások különböző állapotúak lehetnek (például a betűcsalád az egyik osztályból jön, a betűméret egy másikból).

| Jelző színe | Mit jelent |
|---|---|
| Rózsaszín | Az értéket a helyi osztály adja. Ezt semmi nem írhatja felül. |
| Zöld | Ezt a beállítást jelenleg ez az osztály határozza meg. Az osztályok sorrendjének módosításával változtatható. |
| Szürke | A beállítást jelenleg egy másik osztály határozza meg. |
| Narancssárga | A beállítást jelenleg egy másik osztály határozza meg. A sorrend módosításával megváltoztatható, vagy a helyi osztály felülírhatja. |

## Példa: két ütköző osztály

A példában két osztályt használunk: az egyik (**Fo-szoveg**) pirosra, a másik (**Masodlagos**) zöldre állítja a szöveg színét. Mindkettő rajta van egy címsor elemen.

1. Jelöld ki az elemet, és nyisd meg a **Stílus** fület.
2. Az **Osztályok** mezőben látod a **helyi**, a **Masodlagos** és a **Fo-szoveg** osztályt, ebben a sorrendben.
3. Nyisd ki a **Tipográfia** szekciót.
4. Kattints a **Masodlagos** osztályra: a **Szöveg színe** mellett zöld pont jelenik meg, vagyis ez az osztály határozza meg a színt. A szöveg zöld.

![Az Osztályok mezőben a Masodlagos osztály kijelölve, a Szöveg színe mellett zöld pont](./kepek/hibaelharitas-osztaly-jelzo-nyertes.webp)

*Az Osztályok mezőben a Masodlagos osztály kijelölve, a Szöveg színe mellett zöld pont* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

A képen a kijelölt **Masodlagos** osztálynál a **Szöveg színe** mezőt zöld pont jelzi, és a mező a **Masodlagos** osztály színét mutatja.

5. Kattints a **Fo-szoveg** osztályra: a **Szöveg színe** mellett narancssárga pont áll, vagyis ezt az értéket egy másik osztály (a **Masodlagos**) felülírja.

![Az Osztályok mezőben a Fo-szoveg osztály kijelölve, a Szöveg színe mellett narancssárga pont](./kepek/hibaelharitas-osztaly-jelzo-felulirt.webp)

*Az Osztályok mezőben a Fo-szoveg osztály kijelölve, a Szöveg színe mellett narancssárga pont* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

A képen a **Fo-szoveg** piros színe látszik a mezőben, de a narancssárga pont jelzi, hogy ez nem érvényesül.

6. A **helyi** osztálynál a **Szöveg színe** mellett szürke pont látszik: az elem másik osztályból kapja ezt a beállítást, de ez nem ütközik a helyi osztállyal.

Ha a helyi osztályban megváltoztatod a szöveg színét, az lesz az érvényes szín, mert a helyi osztály mindig a legnagyobb elsőbbségű. A jelző ekkor rózsaszínre vált.

## Melyik osztály van használatban?

A jelzők nem csak azt mutatják, hol van ütközés, hanem pontos információt is adnak. Kattints egy jelzőre, és a **Stílus eredete** felugró ablak megmutatja, melyik osztály melyik értéke érvényesül, és melyiket nem veszi figyelembe a szerkesztő (az utóbbi áthúzva látszik).

1. Húzz egy elemet a vászonra, és add hozzá a két osztályt a fenti módon.
2. A panelen nyisd ki a **Tipográfia** szekciót. A szekció neve melletti jelző mutatja, hogy ütközés van a tipográfiai beállításokban.
3. Kattints a **Szöveg színe** melletti jelzőre.

![A Stílus eredete felugró ablak: a Masodlagos osztály zöld színe érvényes, a Fo-szoveg osztály piros színe áthúzva](./kepek/hibaelharitas-osztaly-jelzo-felugro.webp)

*A Stílus eredete felugró ablak: a Masodlagos osztály zöld színe érvényes, a Fo-szoveg osztály piros színe áthúzva* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

A képen a **Stílus eredete** ablakban a **Masodlagos** értéke (`#2e7d32`) érvényes, a **Fo-szoveg** értéke (`#d32f2f`) áthúzott.

## Eltérő értékek az eszközökhöz

A reszponzív szerkesztéssel külön értékeket adhatsz meg a különböző képernyőméretekhez. Például így állíthatsz külön betűméretet asztali gépre és mobilra:

1. Adj egy bekezdés elemet a vászonra, és írj bele szöveget.
2. Nyisd ki a **Tipográfia** szekciót.
3. A **Betűméret** mezőbe írj `14`-et.
4. Kattints a mobil ikonra a nézetablak-vezérlőn.
5. A **Tipográfia** szekcióban állítsd a betűméretet `24`-re.
6. Kattints a **Betűméret** melletti jelzőre.
7. A felugró ablak megmutatja, melyik betűméret érvényes mobilon és melyik asztali gépen. Mobil módban az asztali érték át van húzva.

A reszponzív szerkesztésről bővebben: [Reszponzív szerkesztés V4-ben](https://hub.hellowp.io/hu/plugins/elementor/reszponziv-szerkesztes-v4/).