[CSS]Stijl alleen toepassen op bestanden uit één folder

[sjaakaq]

Ik zit met een probleempje: ik heb een weblog, waarop dus af en toe plaatjes staan. Ook schrijf ik CD reviews die ik op dat log zet. De plaatjes hiervoor (CD covers enz.) staan allemaal in een map (cd_reviews). Nu wil ik alleen die plaatjes een border geven. Nu weet ik dat zoiets met een id kan, maar dan moet ik al die plaatjes nu nog een id gaan geven (hebben ze namelijk niet), en dit ook uitleggen aan een minder-css-begaafde medelogger. Dus is mijn vraag: is er een methode in CSS om een stijl alleen toe te passen op items uit één bepaalde map?

Zoeken op google naar "css only apply certain folder" leverde niets op.
Zoeken op Got naar "css één map" leverde ook niets op.

[dominic]

Je kan in Javascript de img een border even afhankelijk van de string waarde die in de src property staat.

Wat me natuurlijk makkelijker lijkt is om gewoon netjes een aparte class aan te maken voor die afbeeldingen en het netjes in je HTML door te geven.

[sjaakaq]

idd...maar dan moet ik:
1-een helehoop plaatjes nu nog een class geven
2-een non-css kenner (computeranalfabeet) gaan uitleggen dat ie als ie een cd review typt, de img tag een "class="lalala" moet meegevan...wat gegarandeerd misgaat.

[Genoil]

allereerst, wat jij precies wilt kan niet met CSS.
Maar, ik ga er voor het gemak maar even vanuit dat "mijnogen.net" uit je sig de betreffende blog pagina is. Om alle blogentries zit een DIV met class="content". Je kunt nu alle IMG elementen binnen die DIV een border te geven door de volgende CSS regel:

Cascading Stylesheet:

div.content img {
    border: 1px solid #000;
}

[sjaakaq]

Dat weet ik Echter: ik wil alleen de cd covers een randje geven, en binnen content staan ook nog andere soorten plaatjes, die GEEN border moeten krijgen.
Dit kan dus niet met CSS. Is javascript een geschikte kandidaat?

[We Are Borg]

Ik weet niet hoe het plaatsen van plaatjes gebeurd, maar kan je niet zorgen dat de cd cover apart wordt opgegeven bij het laatsen? Dan kan je namelijk het idee van Genoil toepassen wat imo beter is dan JS

[sjaakaq]

De CD cover wordt gewoon via <img> ingevoerd

Maarre wat ik wil kan dus gewoon niet?

[Switch]

Volgens mij niet Maar wat is er zo moeilijk aan het toeveogen van een class=cd in een img tag? Weet niet hoeveel reviews je hebt, maar een beetje copy-paster werkt zich er vast wel doorheen binnen een uur.

[Genoil]

mja javascript...kan wel natuurlijk...fraai? NEE!

ff uit het hoofd hoor

JavaScript:

var c = document.getElementById('content');
var images = c.getElementsByTagName("img");
for(var i = 0; i<images.length();i++) {
    img = images[i];
    if(img.src.match("/\/cd_reviews\//")) {
        img.style.border = "1 px solid #000";
        // of: img.className = "cdreview";
    }
}

[JayVee]

Cascading Stylesheet:

img.cdcover { border: 1px solid gray; }

Op een bepaalde map kan volgens mij gewoon niet.

[sjaakaq]

Hmmm dan maar alle images een border.

OK, weer een beetje wijzer.

[crisp]

leokennis schreef op zondag 12 december 2004 @ 11:27:
De CD cover wordt gewoon via <img> ingevoerd

Maarre wat ik wil kan dus gewoon niet?

Dan kan je toch bij het verwerken van de invoer de src property checken en er alsnog een class aan toekennen?

[ Voor 3% gewijzigd door crisp op 12-12-2004 12:09 ]

[Folkert]

Je werkt met php dus dan kan je het toch makkelijk oplossen met een replace...

gebruk iets van replace(strBody, "<img src="../../cd_reviews/", "<img class='imgClass' src=''../../cd_reviews/")...

ofzoiets. ik ben geen php-er maar een vb-er

Ervan uitgaande dat de items uit een database komen en de image in hetzelfde veld staat als de content zelf....

[ Voor 40% gewijzigd door Folkert op 12-12-2004 12:25 ]

[-Lars-]

Cascading Stylesheet:

/* Rand om cd-covers */
img[src~="/mapnaam_van_map_met_cd_covers/"]
{
    border: 1px solid #000000;
}

Of in pseudo-code: Pas "border: 1px solid #000000;" toe op "img"-elementen waarvan het atribuut "src" het volgende bevat "/mapnaam_van_map_met_cd_covers/".

Ik kan het trouwens fout hebben (ik ben me nog maar net aan het verdiepen in het betere CSS knutselwerk). Of is het niet mogelijk omdat /mapnaam_van_map_met_cd_covers/ niet gegarandeerd voorkomt in het src-atribuut.

edit:
Bovenstaande code klopt niet! Check even Anne's bericht.
Overzicht van selectors: http://www.w3.org/TR/2001...ctors-20011113/#selectors
Ook zal het niet werken in MSIE, zoals Anne al aangeeft.

[ Voor 24% gewijzigd door -Lars- op 12-12-2004 13:20 ]

[Verwijderd]

Je wilt 'img[src*=foo]' als selector gebruiken. Niet 'img[src~=foo]'. Los van het feit dat het waarschijnlijk ook in IE moet werken en je dus toch met een CLASS te werk moet gaan. (Lijkt me nog niet moeilijk om met PHP een dergelijke check te doen en dan de CLASS toe te voegen.

[roytanck]

Attribute selectors worden toch alleen door Mozilla ondersteund nog? Dit is natuurlijk de oplossing (evt. met ^=), maar pratisch toepasbaar lijkt 'ie me niet....

[sjaakaq]

Conclusie:
1-Het kan waarschijnlijk over een paar jaar als Firefox de no.1 browser is
2-Het kan als de items in een database staan, wat niet het geval is
3-Het kan met JS maar voor die oplossing was het al te laat

Oftewel een poldermodeloplossing: om de "css-niet kenner" én de "het moet er wel een beetje mooi uitziener" allebei wat te geven, alles een border

Toch tnx voor de respons en oplossingen e.d., altijd goed voor de search!

[Folkert]

Je zegt dat de items niet uit een database komen maar ik zie dat alle items een ID hebben .... mag ik vragen hoe jou site dan is opgebouwd???