HTML + CSS nietypowe selektory (WSJ- Wyższa Szkoła Jazdy)

Question

Cześć,
Mam oddzielne, przykładowe tagi w php (Joomla- artykuły z tagami):
"Tag"
"Tag Drugi"
"Tag Trzydziesty Drugi"

Tworzę zbiorcze zestawienie tagów na jednej stronie, i system scalił je w jeden nagłówek <h2>:

<div class="tag-category">
<h2>"Tag Tag Drugi Tag Trzydziesty Drugi"</h2>
</div>

Pytanie: Jak złapać je teraz oddzielnie w CSS, żeby można było każdy z osobna wystylizować? Czy to możliwe w CSS? Czy trzeba JS?

Answer 1

Czy o to Tobie chodziło? (css - przykładowy  ). 

Możesz np. tak: pobierasz zawartość h2 (textContent), do każdego tag-u (słowa) dodajesz span, to pozwala na "stylizowanie" z osobna. 

Przykład

<div class="tag-category">
  <h2>"Tag Tag Drugi Tag Trzydziesty Drugi"</h2>
</div>

.tag-category h2 span {
  padding: 0.2em 0.3em;
  margin: 0 0.15em;
  font: 300 1em monospace;
  font-variant: small-caps;
  border-radius: 0.2em;
  cursor: pointer;
}
.tag-category h2 span:nth-child(even) {
  background-image: linear-gradient(transparent 10%, green);
}
.tag-category h2 span:nth-child(odd) {
  background-image: linear-gradient(transparent 10%, yellow);
}
.tag-category h2 span:nth-child(1) {
  background-color: orange;
}
.tag-category h2 span:nth-child(2) {
  background-color: pink;
}
.tag-category h2 span:nth-child(5) {
  background-color: black;
  color: white;
}

const div_tags = document.querySelector('.tag-category h2');
const arr_tags = div_tags.textContent.replace(/['"]+/gi, '').split(' ');

let tags_html = '';
for (const tag of arr_tags)
  tags_html += `<span>${tag}</span>`;

div_tags.innerHTML = tags_html;

 

Comments

Nie mogę nadpisywać HTML, nie pracuję na HTML. Jest on generowany spod systemu php- Joomla!. I dlatego nie mogę dodać <span> do TAG-ów, jak do zwykłego HTML.
Patrz *.jpg:

Mogę jedynie stylizować wygenerowany systemowo HTML. Dlatego pytałem czy z tym da się coś zrobić od strony CSS.

Ale dzięki za starania.
 

---

A co możesz ustawić w zakładce: Tag Options?

Z tego co kojarzę w takich systemach (generowania kodu html), musi być funkcja, która umożliwia dodanie swojego kodu css, js do generowanego kodu html.

---

Mogę w zakładce TAG-ow dodawać <span>, jedynie w opisie Tag-u (description), ale nie mogę tego zrobić w nagłówku TAG-u, który jest nazwą własną Tag-u. Zatem: mogę dodać w opisie do Tag-u. Ale to się mija z celem.
Inna opcja to: Załączanie własnego *.js do systemu, jest to nie mniej skomplikowane i nie warte zachodu.

Dzięki że Ci się chciało pisać całą instrukcję.

---

@VBService, Masz rację. Napisałem już wcześniej. Dodaję własne style, przez zewnętrzny plik *.css. Ale z *.js jest to sprawa złożona i bardziej rozbudowana- wiec nawet nie chcę się zagłębiać w dokumentację tego zagadnienia. Zbyt pracochłonne- w stosunku do opłacalności.

---

To nie będziesz miał rozwiązania. Triki i haki w CSSie mają ograniczony zakres. Najłatwiej byłoby zmienić templatkę PHP (to kwestia zerkniecia w dokumentację Joomli), i w CSSie odpowiednio wystylizować klasy.

Bez ingerencji w JS lub HTML nie ma takiej możliwości.

---

Dzięki za komentarz.
Jakbym znal php- moze bym grzebał w systemie. A tak po amatorsku- to strach że się cos s-oli. System potrafi się wywalić/nie wczytywać/uszkodzić bazę danych- przy instalacji zwykłego modułu- a co dopiero po ręcznej modyfikacji kodu.
Ale nietrudno dostrzec że programiści Joomli mogliby takie szczegóły popoprawiać; wrzucić tag-i w osobne paragrafy etc (Od biedy- rozdzielić przecinkami). A nie wszystko razem do jednego worka.

---

@radek024, Znalazłem rozwiązanie. ;P

.tag-category h2 {
    width: 140px;
    display: table-caption;
    font-size: 14px;
    word-spacing: 100px;
}

Nadaje się nawet do krótkich TAG-ów, 2- i 3-literowych.
Nie da się TAG-ów pojedynczo wystylizować, ale przynajmniej są oddzielnie napisane i nie zlewają się w linię znaków.

Jeszcze zapomniałem napisać, że Tag-i: 2-wu i 3-członowe połączyłem myślnikiem, przez co stanowią 1 wyraz. J.n.:

"Tag"
"Tag-Drugi"
"Tag-Trzydziesty-Drugi"

---

Znalazłem rozwiązanie- odpowiedź: w wątku niżej.