CSS Selectors

CSS Selectors

CSS selektori nam služe za odabir elemenata koje želimo stilizirati.

Odabir elemenata se vrši preko HTML elemenata preko njihovog ID-a, klasa, tipova, svojstava (atributa), vrijednosti svojstava itd.

HTML element selektori

HTML element selektori odabiru HTML elemente po njihovom imenu.

Primjer: Mijenjanje izgleda svih <p> elemenata na stranici

Želite li unutar svih <p> tagova na stranici postaviti centralno poravnavanje teksta i obojiti tekst u plavu boju napisati ćemo u CSS stilu nešto u ovom stilu:

p {
text-align: center;
    color: red;
}

ID selektori

ID selektori koriste ID atribut HTML taga za odabir pojedinih elemenata.

ID može biti jedinstven unutar jedne stranice pa ga možete koristiti da odaberete i jedinstveni element.

Da biste deklarirali element sa određenim ID-om morate ispred njegovog naziva staviti znak #:

Da biste primjenili ID selektor na određeni element, morate tom element dodati:  id=”naziv”, gdje je “naziv” naziv  ID elementa

plus500

Primjer: Deklariranje i primjena ID selektora


<!DOCTYPE html>
<html>
<head>
<style>
/*Here is ID selector declared*/
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
/*Primjena ID selektora*/
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Class selektori

Primjer Class selektora


<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

Primjer Class selektora primjenjenog na samo jedan HTML elemenat


<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
 

Grupiranje selektora

Primjer grupiranja selektora


h1, h2, p {
text-align: center;
color: red;
}

Pogledajte ovaj interaktivni tester koji će vam demonstrirati različite selektore.