V následujícím výčtu uvádím často problémové selektory, které se však hodí znát a umět je řádně používat.

X + Y

ul + p {
   color: red;
}

Pouze první <p> (odstavec) bude červený a to jen tehdy, pokud bude přímo za <ul> tagem.

X > Y

div#container > ul {
  border: 1px solid black;
}

Vybere všechny přímé děti, takže nested lists s tagem <ul> už zahrnuty nebudou.

X[href*="kod"]

a[href*="kod"] {
  color: blue;
}

Pokud budeme mít tag <a>, jehož odkaz bude například http://kuskodu.cz, tak se daný odkaz zbarví do modra, jelikož odkaz obsahuje kod.

Hvězdička za href znázorňuje CONTAINS (obsahuje kdekoliv v řetězci). Pokud bychom chtěli, můžeme místo hvězdičky použít ^ (obsahuje od začátku řetězce) nebo $ (od konce řetězce).

Díky výše uvedeným možnostem, tak můžeme například filtrovat pouze obrázky, které mají v odkazu příponu jpg:

img[href$=".jpg"] {
   display: none;
}

X [class*="span"]

.show-grid [class*="span"] {
    background-color: #eee;
}

Stejně jako v minulém případě, tak nyní však nemusíme zjišťovat přítomnost atributu v daném prvku, ale i ve vnořených prvcích. Díky tomuto v .show-grid, změníme barvu například třídě, která se může jmenovat .sspann.

X:not(selector)

div:not(#container) {
   color: blue;
}

Vybere všechny elementy div, které nemají id container.