• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+2 głosów
315 wizyt
pytanie zadane 3 października 2021 w HTML i CSS przez w2 Obywatel (1,110 p.)

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?

1 odpowiedź

+2 głosów
odpowiedź 3 października 2021 przez VBService Ekspert (251,210 p.)
edycja 3 października 2021 przez VBService

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

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;

 

komentarz 3 października 2021 przez w2 Obywatel (1,110 p.)

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.
 

komentarz 3 października 2021 przez VBService Ekspert (251,210 p.)

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.

1
komentarz 3 października 2021 przez w2 Obywatel (1,110 p.)
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ę.
1
komentarz 3 października 2021 przez w2 Obywatel (1,110 p.)

@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.

komentarz 3 października 2021 przez radek024 Szeryf (77,180 p.)
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.
1
komentarz 3 października 2021 przez w2 Obywatel (1,110 p.)
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.
komentarz 4 października 2021 przez w2 Obywatel (1,110 p.)
edycja 4 października 2021 przez w2

@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"

komentarz 4 października 2021 przez w2 Obywatel (1,110 p.)
Znalazłem rozwiązanie- odpowiedź: w wątku niżej.

Podobne pytania

0 głosów
1 odpowiedź 117 wizyt
pytanie zadane 27 lutego 2020 w HTML i CSS przez BlayUng Początkujący (260 p.)
0 głosów
3 odpowiedzi 381 wizyt
0 głosów
0 odpowiedzi 89 wizyt
pytanie zadane 11 października 2020 w PHP przez niezalogowany

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...