# CSS-osztály és CSS ID

> Egyedi CSS-osztály és azonosító adása az elemeknek, a CSS megírása Elementor Pro-val és ingyenes változattal, a widget belsejének célzása.

Az osztály több elemet köt össze, így egyetlen szabállyal stílusozhatod őket. Az azonosító (ID) egyetlen elemet jelöl meg az oldalon, így rá hivatkozhatsz, például horgonylinkkel. Mindkettő a **Haladó** fül **Elrendezés** szekciójában van.

![A Haladó fül Elrendezés szekciója kitöltött CSS ID és CSS-osztályok mezővel](./kepek/stilus-css-osztaly-azonosito.webp)

*A Haladó fül Elrendezés szekciója kitöltött CSS ID és CSS-osztályok mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=24&action=elementor)

A képen a **CSS ID** mezőben „fo-cim”, a **CSS-osztályok** mezőben „change-color” áll.

## CSS-osztály hozzáadása egy elemhez

1. Jelölj ki egy elemet a vásznon.
2. A panelen nyisd meg a **Haladó** fület.
3. Írd az osztály nevét a **CSS-osztályok** mezőbe.
4. Ismételd meg minden elemnél, amelyet ugyanabba az osztályba szeretnél tenni.

Az osztály nevét pont nélkül add meg. A névnek betűvel kell kezdődnie, a szavakat kötőjellel vagy aláhúzással választhatod el. Szóközt és speciális karaktert ne használj.

## CSS ID megadása

A **CSS ID** mezőbe írt azonosítóval egyetlen elemet jelölsz meg. Erre az elemre aztán linkkel is hivatkozhatsz (horgony), és egyedi CSS-szabállyal is megcélozhatod. Egy azonosítót egy oldalon csak egy elemnek adj.

## A CSS-kód megírása Elementor Pro-val

Az Elementor Pro-ban közvetlenül a szerkesztőben írhatsz CSS-t, és a változást azonnal látod.

1. Az egész webhelyre érvényes szabályhoz nyisd meg a **Webhely beállításai** panelt, és válaszd az **Egyedi CSS** részt.
2. Egy elemre vonatkozó szabályt az adott widget **Haladó** fülén, az **Egyedi CSS** szekcióban írhatsz.
3. A szabályban az osztály neve elé írj pontot, például:

```css
.change-color { color: green; }
```

## A CSS-kód megírása az ingyenes változatban

Az Elementor ingyenes változatában nincs **Egyedi CSS** panel a szerkesztőben. A kódot a WordPress testreszabójában adhatod meg.

1. Mentsd az Elementor-oldalt.
2. A WordPress vezérlőpultján válaszd a **Megjelenés → Testreszabás → További CSS** menüpontot.
3. Írd be a szabályt, az osztály neve elé pontot téve.

## A widget belsejének célzása

Az Elementor az egyedi osztályt a widget külső HTML-burkolójára teszi, ezért a szabály az egész elemre vonatkozik. Ha a stílus nem érvényesül a widget belsejében lévő szövegen vagy képen, a szabályhoz add hozzá a HTML-címkét is:

```css
.change-color h2 { color: green; }
.change-color img { border-radius: 8px; }
```

## Példa: hetente váltott színű szövegek

Egy weboldalon hetente más színű legyen néhány kiemelt szöveg. A szerkesztéskor minden ilyen szövegelemhez a **CSS-osztályok** mezőben a „change-color” osztályt rendeled, a **Webhely beállításai** → **Egyedi CSS** részben pedig ezt írod:

```css
.change-color { color: green; }
```

Ha később más színt szeretnél, elég a „green” szót lecserélned: az összes megjelölt elem színe egyszerre változik.