Css selectors

  • Onderwerp starter Onderwerp starter eeopd
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
E

eeopd

Gebruiker
Lid geworden
13 aug 2010
Berichten
51
Hallo allemaal,

Ik ben bezig met css selectors.
Ik wil selecteren wat er in de tags staat:
voorbeeld:
HTML: 
<html>
<body>
<p>Deze tekst moet rood zijn</p>
<p>Deze tekst moet groen zijn</p>
</body>
</html>
Hoe krijg je dit voor elkaar?
 
Kun je wat duidelijker uitleggen wat je bedoeld? In CSS selecteren wat in de tags staat?
 
Ik wil inderdaad selecteren wat in de tags staat. Waar Deze tekst moet blauw zijn staat moet de kleur blauw zijn.
 
csshunter zei:
Hoi eeopd,
Aha, dat hoort bij de absolute basiskennis van css. Die moet bestudeerd worden als je iets met css wilt gaan doen! ;)
Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Nou nee.:rolleyes::rolleyes:

Ik wil graag dat deze twee paragraphs verschillende kleuren hebben, dit zonder divs of classes etc.
Ik wil alles wat er in de tags staat gebruiken om selectors te maken.
Dus, is het mogelijk, om met alleen css, zonder aanpassingen in de html zelf, de tekst waar:
"Deze tekst moet rood zijn" de tekst in de paragraph rood is, maar waar staat: "deze tekst moet groen zijn" moet de paragraph groen zijn.

Misschien is het veel makkelijker om classes of divs te gebruiken, maar ik wil weten of dit mogellijk is.
 
Nou nee. :rolleyes::rolleyes:
Klik om te vergroten...
Aha. Maar als het letterlijk dit in de html moet zijn:
HTML: 
<html>
    <body>
        <p>Deze tekst moet rood zijn</p>
        <p>Deze tekst moet groen zijn</p>
    </body>
</html>
... dan is er niets in de tags <p> waaruit je met css kunt opmaken of die paragraaf nu rood of groen of iets anders moet zijn: er is geen aanknopingspunt voor de css, en dan kan het niet. Tenminste niet met alleen css.
Dat zal je ook in alle cursussen gelezen hebben. :)

Het zou eventueel wel met javascript erbij kunnen. Dan kan het javascript alle <p>'s langslopen, en voor die <p>'s waar het woord "rood" in staat de hulp van css inroepen om die paragraaf in z'n geheel rood te maken. Dan is in feite het woord "rood" de trigger. - Idem dito voor groen of een andere kleur.
  • Spelfouten in het woord "rood" van de tekst mogen dan niet, want als je het er niet speciaal bij opgeeft, doet bv. de zin <p>Deze tekst moet ook een rode kleur hebben</p> het op deze manier niet.
  • Ook als bv. alleen de eerste <p> rood moet worden (of de eerste <p> in elke <div>), kan javascript ervoor zorgen.
  • Hier is een voorbeeld met de minimale bovenstaande html. :eek:
  • Als javascript uit staat, zie je alleen maar de standaardkleur.
Dus: wel mogelijk, maar is onhandig, en het vraagt ook een extra serie coderegels javascript, terwijl het met een simpele class="rood" opgelost zou zijn.

Ook een andere (server-side) scripttaal zou zoiets wel kunnen doen, denk ik. Met grote kans dat je in de gegenereerde html-code weer wel classes of inline css-styles tegenkomt. *)

Om het zonder een class of id te doen, zou ook nog kunnen door extra html-tags te gaan misbruiken. Je kunt bv. doen:
HTML: 
<html>
    <body>
        <p><em>Deze tekst moet rood zijn</em></p>
        <p>Deze tekst moet groen zijn</p>
    </body>
</html>
... waarbij de <em> normaal gesproken zorgt voor cursief (em = emphasis = nadruk). Met css kan je dan het cursieve weer terugzetten in normaal, en er tevens de tekstkleur "rood" voor in de plaats zetten. Als 5 kleuren nodig hebt, moet je dan 5 tags zien te vinden die je nergens anders voor mag gebruiken, want hun gewone werk kunnen ze dan niet doen. Niet aan te bevelen, en classes of id's werken net zo goed > correctie: beter!

Kortom, html is niet voor opmaak bedoeld (er zijn een paar schoonheidsfoutjes ingeslopen, maar die gaan er in de loop der jaren wel uit), javascript is ook niet voor opmaak bedoeld (tenzij iets dynamisch aan de opmaak moet veranderen), en ...
css (met classes en id's) is juist voor de opmaak bedoeld, en is niet voor niets uitgevonden. :D

Waar ik wel nieuwsgierig naar ben: waar komt je vraag nou vandaan?

Met vriendelijke groet,
CSShunter
_____________
*) Dit is waarschijnlijk ook de manier waarop Google zorgt dat in hun cache-bestanden de gevonden zoekwoorden vet worden gemaakt, en van een achtergrond-kleur ("marker-viltstift") worden voorzien.
In de homepage van Mooi-zo.nl staat bv. in de originele broncode:
HTML: 
<p class="style15"><br>
   <strong>Welkom bij 
   Mooi zo !</strong><br>
   <br>
   Mooi zo! is gevestigd ... enz.
terwijl het cache-bestand van Google (op de trefwoorden [mooi zo]) van dezelfde pagina dit heeft gemaakt:
HTML: 
<p class="style15"><br>
   <strong>Welkom bij 
   <b style="color:black;background-color:#ffff66">Mooi</b> 
   <b style="color:black;background-color:#a0ffff">zo</b> !</strong><br>
   <br>
   <b style="color:black;background-color:#ffff66">Mooi</b> 
   <b style="color:black;background-color:#a0ffff">zo</b>! is gevestigd ...
 
csshunter zei:
Aha. Maar als het letterlijk dit in de html moet zijn:
HTML: 
<html>
    <body>
        <p>Deze tekst moet rood zijn</p>
        <p>Deze tekst moet groen zijn</p>
    </body>
</html>
... dan is er niets in de tags <p> waaruit je met css kunt opmaken of die paragraaf nu rood of groen of iets anders moet zijn: er is geen aanknopingspunt voor de css, en dan kan het niet. Tenminste niet met alleen css.
Dat zal je ook in alle cursussen gelezen hebben. :)

Het zou eventueel wel met javascript erbij kunnen. Dan kan het javascript alle <p>'s langslopen, en voor die <p>'s waar het woord "rood" in staat de hulp van css inroepen om die paragraaf in z'n geheel rood te maken. Dan is in feite het woord "rood" de trigger. - Idem dito voor groen of een andere kleur.
  • Spelfouten in het woord "rood" van de tekst mogen dan niet, want als je het er niet speciaal bij opgeeft, doet bv. de zin <p>Deze tekst moet ook een rode kleur hebben</p> het op deze manier niet.
  • Ook als bv. alleen de eerste <p> rood moet worden (of de eerste <p> in elke <div>), kan javascript ervoor zorgen.
  • Hier is een voorbeeld met de minimale bovenstaande html. :eek:
  • Als javascript uit staat, zie je alleen maar de standaardkleur.
Dus: wel mogelijk, maar is onhandig, en het vraagt ook een extra serie coderegels javascript, terwijl het met een simpele class="rood" opgelost zou zijn.

Ook een andere (server-side) scripttaal zou zoiets wel kunnen doen, denk ik. Met grote kans dat je in de gegenereerde html-code weer wel classes of inline css-styles tegenkomt. *)

Om het zonder een class of id te doen, zou ook nog kunnen door extra html-tags te gaan misbruiken. Je kunt bv. doen:
HTML: 
<html>
    <body>
        <p><em>Deze tekst moet rood zijn</em></p>
        <p>Deze tekst moet groen zijn</p>
    </body>
</html>
... waarbij de <em> normaal gesproken zorgt voor cursief (em = emphasis = nadruk). Met css kan je dan het cursieve weer terugzetten in normaal, en er tevens de tekstkleur "rood" voor in de plaats zetten. Als 5 kleuren nodig hebt, moet je dan 5 tags zien te vinden die je nergens anders voor mag gebruiken, want hun gewone werk kunnen ze dan niet doen. Niet aan te bevelen, en classes of id's werken net zo goed > correctie: beter!

Kortom, html is niet voor opmaak bedoeld (er zijn een paar schoonheidsfoutjes ingeslopen, maar die gaan er in de loop der jaren wel uit), javascript is ook niet voor opmaak bedoeld (tenzij iets dynamisch aan de opmaak moet veranderen), en ...
css (met classes en id's) is juist voor de opmaak bedoeld, en is niet voor niets uitgevonden. :D

Waar ik wel nieuwsgierig naar ben: waar komt je vraag nou vandaan?

Met vriendelijke groet,
CSShunter
_____________
*) Dit is waarschijnlijk ook de manier waarop Google zorgt dat in hun cache-bestanden de gevonden zoekwoorden vet worden gemaakt, en van een achtergrond-kleur ("marker-viltstift") worden voorzien.
In de homepage van Mooi-zo.nl staat bv. in de originele broncode:
HTML: 
<p class="style15"><br>
   <strong>Welkom bij 
   Mooi zo !</strong><br>
   <br>
   Mooi zo! is gevestigd ... enz.
terwijl het cache-bestand van Google (op de trefwoorden [mooi zo]) van dezelfde pagina dit heeft gemaakt:
HTML: 
<p class="style15"><br>
   <strong>Welkom bij 
   <b style="color:black;background-color:#ffff66">Mooi</b> 
   <b style="color:black;background-color:#a0ffff">zo</b> !</strong><br>
   <br>
   <b style="color:black;background-color:#ffff66">Mooi</b> 
   <b style="color:black;background-color:#a0ffff">zo</b>! is gevestigd ...
Klik om te vergroten...

Jammer.

Nouja, toch bedankt voor de scriptjes.
Ik heb wel wat gelezen over het :first-line pseudo element.
Ik dacht dat je dan ook wel een woord als selector kon gebruiken.
 
Ja, de :first-line (voorbeeld w3schools) en :first-child (voorbeeld w3schools) selectors zijn er ook nog. Maar die werken op de structuur van een document, en niet op de inhoud ervan: alle eerste regels van een element, of alle eerste kinderen van een element.
Met css puur op inhoud selecteren gaat dus niet.
Als browser zou ik het ook moeilijk krijgen bij de code:
HTML: 
<html>
    <body>
        <p>Deze tekst moet rood zijn</p>
        <p>Deze tekst moet groen zijn</p>
        <p>Deze tekst moet groen of rood zijn</p>
        <p>Deze tekst moet niet groen zijn</p>
        <p>Deze tekst moet geen groen zijn</p>
        <p>Deze tekst moet niet groen zijn, maar heeft er geen zin in</p>
        <p>Deze tekst moet niet rood maar groen zijn</p>
        <p>Groen? Nee: rood!</p>
        <p>Deze tekst moet groen zijn, of niet soms?</p>
        <p>Is het niet waar, dat deze tekst niet groen is?</p>
        <p>Ja, het is niet waar dat deze tekst niet groen is!</p>
        <p>Deze tekst moet groen zijn, maar blauw als er ook het woord rood in staat</p>
    </body>
</html>
:d :D :D
Bij dit soort gecombineerde inhoud/opdrachten wordt het uitermate gecompliceerd (c.q. wellicht onmogelijk) om een helemaal sluitend beslismodel te maken. Wat moet je doen met het woord "niet"? Dat kan soms op de kleur slaan, maar niet altijd. Wat doe je, als er twee keer het woord "niet" in staat? Of "niet" gecombineerd met "geen"? Kan je bij verschillende kleuren een IF, AND, OR, ELSE status creëren? (dan gaat het aardig de kant van javascript op!) enz.

Toch is er een tijd lang sprake van geweest dat er in css3 een nieuwe selector zou komen, die op inhoud zou selecteren:
[citaat]
CSS3 also has a content pseudo-class selector. The :contains selector searches the content of a specified element for a matching substring. This selector is for static media only (i.e., print and not screen display). A rule to style text when printed from a bullet list that contains the word "special," would look like this:
li:contains("special"){text-style: italic;}
[einde citaat]
Aldus een vooruitblik op css3 in 2003 bij www.xml.com/lpt/a/1230
​
Maar intussen is de betreffende paragraaf :contains uit de w3c plannen voor css3 geschrapt!
Zie 6.6.6 Blank (This section previously defined a :contains() pseudo-class.)
Conclusie: we kunnen het wel schudden. ;)
Waarvan akte!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan