wunderschönen guten morgen des 11 aber das als samstag ist darf man durchaus auch ein bisschen länger schlafen also der letzte teil der videosequenz zu dem themenbereich k soloklasse soul elemente und kombinat ohren und in diesem video geht es vorwiegend geben um die kombination ich habe zuletzt bei video schon angekündigt und wir setzen die jetzt nahtlos an dieses ist dass theorie video und dazu gibt es noch ein praktisches video ja die unterscheiden sich jetzt nicht groß also ich zeige ganz kurz das kombinat ohren sind und wie man diese dann eben in css umsetzt beide kombinationen ist es so das ist ein bisschen technischer wird das heißt man muss erst versuchen so bis in die strukturen hinter den kombinationen selbst zu verstehen die anwendet viele der anderen themen wie wir behandelt haben wir dann eher praktisch orientiert jetzt wird es eben erst mal so ein bisschen technisch theoretischer ich setze mal einen letzten theorie video kurz an und verdeutlicht an dieser stelle einmal kurz welche sektoren wir kennen die wissens der rektoren sind dafür da um in html eben entsprechende elemente ansprechen zu können über css also ohne selek toren kann ich eben keine html elemente design funktionierte nicht und wir haben jetzt vier verschiedene sektoren kennengelernt oder vier verschiedene typen von select ohren das erste ist der typ c lektor wir erinnern uns typs elektronen sind dafür da um html elemente direkt anzusprechen wie zum beispiel ein deftig dann bricht in css different schreiben und den schweifen klammern die viele anweisungen klassen selektieren und diese lektoren können unterscheiden gebunden und ungebunden je nachdem ob ich eben diese klasse oder diese id an ein spezielles html element binden möchte oder nicht bei klassen sie elektronen ist es so dass führend der punkt auf geschrieben wird und danach ein beliebiger klar name der klassen name das sind so mutations richten die nennen sollte klein geschrieben werden und auch nicht mit einer zu beginn und ganz grundsätzlich sollten umlaute verlieben bei den all diese lektoren nutzt nämlich den punkt dort nutzen wie die raute und können dann eine alte steigen wir erinnern uns daran dass er dies dafür da sind ja elemente zu oder klasse zu konstruieren die nur ein einziges mal in den html dokument angewendet werden können wir haben halt auch schon festgestellt dass es durchaus möglich ist neu die russiker zu vergeben das heißt hier gibt es auch vier semantischen hintergrund hinter denen dies also all dies bemerken uns nur für bereiche die ein einziges mal im html element vorkommen ja und da hatten wir noch die pseudo select ohren dort gibt es im grunde zwei verschiedene das haben wir dem vorherigen videos gesehen haben einmal die pseudo klassen pseudo klassen werden mit einem doppelpunkt notiert zum beispiel aber wenn die maus darüber ist und pseudo elemente dort nehmen wir zweimal doppelpunkte wie zum beispiel first letter ja warum pseudo das war die ganze geschichte dass wir dort elementen html ansprechen wollen die es so gesehen nicht gibt das heißt die nicht speziell in einem html tag eingebettet sind zum beispiel beim fürsten wetter ist es so dass ein paragraph beispielsweise sicherlich irgendwie mit einem buchstaben anfängt dieser konkrete buchstabe wiederum steht allerdings nicht in einem html tag und die kombinatorik finden wir in dem bereich kam aus dem grund weil wir jetzt überlegen wollen wie schaffe ich es denn irgendwie verschiedene elektro miteinander zu verkennen live wollte hier eigentlich gar nicht wie eine kette zwischen mal wie funktioniert das nicht ganz so richtig wie ich mir das vorstelle wir überlegen uns an dieser stelle also jetzt wie kann ich verschiedene das electrum miteinander verknüpfen und dann am ende wirklich punktgenau spezielle html elemente anzusprechen gut das heißt damit haben wir eigentlich schon die kommentatoren mehr oder weniger definiert ich schreibe das noch mal hin kombinat ohren dienen dazu verschiedene sektoren miteinander zu verbinden mit alternder zu verbinden und diese art der verbindung zweier elektronen die ist oder die dirigiert so ein bisschen es gibt vier verschiedene möglichkeiten wir sehen dass wir schon darauf gehe ich gleich noch etwas genauer ein bevor wir uns diese möglichkeiten ansehen muss man sich gut überlegen wie stehen auf seiner webseite eigentlich die ganzen elemente in beziehung zueinander und das habe ich jetzt ein beispiel aufgemalt und dieses beispiel möchte ich auch gleich bei den kommentatoren immer wieder aufgreifen wir sehen hier auf dieser seite dass das eigentlich eine geschriebene html seite ist an dieser stelle fehlt logischerweise der html tag der heckbereich und der bulli bereich für uns geht es aber tatsächlich nur die verschachtelung verschiedene html elemente hinein wir sehen zum beispiel dass dieser duft bereich der hier aufgemacht ist und hier ganz unten wieder geschlossen wird dass der sich zum beispiel innerhalb des artikel tags befindet der ganz unten wieder geschlossen wird das ist etwas was wir jetzt so im laufe der letzten unterwegs einer in häufiger der wahl gemacht haben wir strukturieren unsere webseite auf semantischer ebene sagen also dass verschiedene html tags in andere html tags integriert werden und das was wir jetzt hier auf der rechten seite sehen das ist eine andere darstellung also mehr so ein modell der webseite die hier formuliert habe und die frage ist jetzt sicherlich ja wie liest man denn jetzt dieses diagramm also wir finden da auch wieder verschiedene dips und ps und so weiter sind noch genau diesen hier sind und dieses diagramm liest man in zwei verschiedenen richtungen und die erste richtung ist eben von links nach rechts deswegen würden wir hier mal so ein pfeil in marl und das was wir von links nach rechts lesen die sogenannte eltern kind beziehung und das klingt jetzt vielleicht alles so ein bisschen dramaturgisch wir sind ja aber nicht bei unserer kleinen farm sondern diese eltern kind beziehung die brauchen wir auch wenn wir uns die nächsten teilbereich l ansehen dort geht es um vererbung strukturen und da kommen wir auch noch mal genau auf diese beziehung darauf zu sprechen frage was bedeutet die jetzt eltern kind beziehung von links nach rechts soll heißen dass zum beispiel dieses element was ich ja gerade auch schon mal angesprochen habe ein kind element ist von dem artikel element warum ist das jetzt ein kind element deswegen schauen wir hier noch mal rechts in den quellcode hinein dieses div element das wir das genau das was hier dargestellt ist das ist ein nachfahre von artikeln also das kind element dann weil das da drin geachtet ist und vielleicht wird jetzt auch noch mal deutlich warum es durchaus sinnvoll ist ein quell-code einzurücken weil dann erkennt man eben welches html element steckt eigentlich welchem anderen html element drin und diese darstellung hier die macht es in meinen augen also ein bisschen übersichtlicher hat weil ich jetzt genauso okay wenn ich von links nach rechts lese kann ich herausfinden welche elemente stecken in welchem anderen element drin also doch steckt im artikel element dieses div element wiederum steckt in diesem element drin da sehen wir hier mit die dritte abstufung dieses element wir sehen uns hier das ist er hier steckt in diesem div element warum lehnen das von links nach rechts gut dann ist schluss an dieser stelle weil jetzt gibt es so gesehen kann einrücken mehr und deshalb gibt es jetzt eine zweite leserichtung dieses diagramm das eben von oben nach unten es nämlich einen weiteren pfeil hin und die leserichtung von oben nach unten das ist die geschwister oder auch nachbar beziehung bindestrich nachbar bindestrich beziehungen gut der name verrät dass vermutlich schon hier geht es darum welche elemente stehen nebeneinander wer so sind nicht irgendwie sinne der eltern kind beziehung miteinander verwandt und deswegen gehen wir noch mal genau hier rein bei den text haben gesagt okay dieses pack ist ein kind element dieses dieser division hier und dieses paktes schließt gc und danach öffnet sich ein weiteres patrick und deshalb diese dieser tag hier ein nachbar von diesem pack oder auch ein geschwister element weil dieses element steckt auch in diesem die finderin das erkennen wir ja daran dass erst nach diesem element hier dass die vision element geschlossen wird und von diesen beiden elementen hier wäre quasi diese division der großvater wenn man das so möchte und der artikel tag hingegen wäre der urgroßvater na also von links nach rechts eltern kind beziehung von oben nach unten geschwister beziehung gut und wenn man sich dieses diagramm dann einmal vor augen führt dann kann man jetzt anfangen sich kurz mit der kombination auseinanderzusetzen und dann ist es im grunde auch gar nicht so schwierig wir fangen oben an ich habe den orange markiert hier geht es jetzt um diesen kombi natur und ja wir sehen hier gar keinen kombi natur denn der erste kombinat ohr ist ein leerzeichen zu nutzen also den kombi natur artige leerzeichen p und das ist der so genannte nachfahren selek tor jetzt kann man sich fragen wieso heißt der apparat jetzt elektro vom kombinat ohren sprechen deswegen vielleicht ein kurzer hinweis das ding jetzt leerzeichen dass es der kombi natur und wenn ich diesen kombi natur verwende dann habe ich insgesamt ein nachfahre eines elektro so das ist ja zu der nominelle zusammenhang gut was bedeutet jetzt der nachfahrende lektor der nachfahren select ohr sagt also wenn man das hier lesen möchte der sagt ich spreche alle p tags an sofern diese tags als vorfahre ein artikel element das heißt alle ptx werden eingefärbt deren vorfahren artikeln element ist ich habe es hier keine genaueren stil anweisung aber wir machen das in unserem diagramm war so dass ich das eben genau mit dem geld einwerben wir gehen also jetzt in unser diagramm hinein und das erste was wir wissen ist dass wir uns im moment so dass wir uns erst mal die ptx heraussuchen weil die stehen direkt von den geschäften klappern 100 sie wir haben hier ein pack hier an tätig hier ein pc und hier unten hat sich auch noch ein pack versteckt und jetzt überlegen wir uns wann genau sprechen wir jetzt diesen nämlich immer dann wenn das p ein nachfahre von artikeln tages soll heißen ist dieses psp dieses p und dieses bunten sind das nachfahren das heißt lesen wir von links nach rechts in diese richtung von einem artikel element in diesem fall stellen wir sicherlich schnell fest ja das ist der fall dann sprechen wir mit dieser stil anweisung was als mit dem nachbarn elektro automatisch alle ps an wenn ich also sagen schrift farbe verändert sich auf rot da erinnert sich genau an diesen text die schriftfarbe auf brot ich ergänzen dieses diagramm kurz unterhalten hätten wir jetzt hier neben noch ein perfekt das heißt der architekt schließlich und danach öffnet sich ein fenster dann würde eben dieses p hier nicht angesprochen werden denn dieses ist nur ein nachbar von artikeln nicht aber ein nachfahre heißt also der nachfahren selek tor spricht alle elemente an die nachkommen sind das element welches vorher steht also vor dem kombi natur kommt zunächst und kombinate artikel größer die artikel größer die meint dass wir einen so genannten kind see lektor konstruieren und dieser kind select ohr wenn man das hier mal durchleben musste wird quasi also da wird der nachfahren sektor etwas genauer beschrieben das soll diesem fall heißen dass wir alle die vision tags ansprechen wir sprechen aber nur die division tags an die als direkten vorfahren ein artikel tag klingt ähnlich wie beim nachfahren select oh ja es ist auch ähnlich es ist aber eben nicht das gleiche deswegen glaubt mir nach unten ich wechsele die farbe auf blau wir suchen uns alle division tags raus und schauen ob der direkte vorfahren ein artiges rein schauen uns diese typischen an und überlegen uns hat diese typischen als direkten vorfahren einen artikel element hat sie sagt blau wir gehen ins nächste devision element und schauen uns an ist der direkte vorfahren dieser division 1 artigen element schauen muss wie vor fahren an das ist mit die vision das heißt dieses element hier wir nicht von der steel anweisung berührt bei diesem element ist es jetzt das gleiche haben wir die vision der direkte vorfahrer allerdings ist auch hier der typischen tag deswegen wird das nicht eingefärbt wir haben hier eine weitere revision der vorfahre dieser division ist der artikel tag daher blau und wir haben hier unten drunter noch eine weitere revision und auch von die die vision ist der vorfahre hat eine ebene weiter nach links der artikel heißt also mit dem kind see lektor schaue ich mir nur die elemente an die kinder des vorher stehenden element sind bei diesen beiden hier wäre quasi das artikel element der opa und das wird dann eben nicht berücksichtigt da müsste man dann auf den nachfahren select ort zurückkommen gut ich ziehe jetzt mal eine inzwischen sogar werden wo seinen gedankenstrich sein warum da komme ich gleich noch mal drauf willkommen zum nächsten selek tor wir sehen an dieser stelle dass wir die vision plus die vision haben danach wollte stil anweisung und gewissensbissen plus gewesen damit konstruieren wir uns den sogenannten nachbar select stunde doch nachbarn und dieser selek tor meint dass wir alle divisions ansprechen sofern der direkte nachbar das bedeutet dieser kombination hier auch einen typischen ist und ich färbe das ganze roth ein wenn das so ist und wir gehen nach unten und schauen uns wieder divisions an schauen uns diese dinge ich mir als erstes angefahren um wieder an hat diese division als direkten nachbarn wir müssen das nach oben lesen eine division hier oben drüber gibt es nicht das heißt diese vision hat auch oben keinen nachbarn deswegen wird dieser und nicht angesprochen das gleiche gilt für diese division weil auch diese nach oben so gesehen keine nachbarn hat gehen wir hier nach unten wir haben diesen tag hat dieser tag einen direkten nachbarn nach oben hinter ein deftig ist ja wohl hat er und daher mag ihn mir das ganze ding auf rot wir schauen uns diese division an hat diese division direkt nachbar nach oben in der 1 inzwischen ist hier aber nicht markieren das auf rot und last but not least haben wir hier noch eine vision und fragen uns hat dieser division einen direkten nachbarn der an den gewinnen ist sonst an und sagen jawoll und deswegen wird auch passiert rot markiert das ist der so genannte nachbar select oder schaut sie hier mal den direkten nachbarn dh welches ding steht direkt daneben das schaut er sich an last but not least die vision komische linie division vorweg diese komische linie das nennt man till de vielleicht habe ich jetzt weil das gelernt wie man dieses komische zeichen nennt das heißt das wäre die vision till.de gewesen und dieser kombi natur führt dazu dass wir folgen den sektor generieren den sogenannten geschwister elektro und wo ist der unterschied zwischen nachbarn und geschwistern das ist ganz einfach beim nachbar selek tor muss direkt daneben eben das vorne angesprochen den dingen stehen das ist dass sie muss direkt daneben stehen und beim geschwister elektro ist es so dass dieser apparat hier irgendwo daneben stehen muss nicht direkt zwang deutlich das heißt wir lesen dieses ding so wir sprechen alle typischen tags an die irgendwo neben einem anderen devision tag stehen die werden hier eingeführt ich bin mach das nochmal auf lila und dann gehen wir nach unten haben wir hier bei diesen beiden wieder irgendwelche geschwister nach oben hin haben wir nicht deswegen werden die auch nicht eingefärbt steht dieses typischen tag neben einem devision tag ja das ist so das heißt dieser hier wird eingefärbt merkel hat das beispiel hin bisschen deswegen handeln wir das gleich ab max born steht dieses division tag irgendwo neben einem anderen tag tut es wir markieren das und das letzte beispiel steht dieses division irgendwo neben einem anderen division tut es auch deswegen werden wir das gut warum habe ich jetzt gesagt das beispiel ist ein bisschen doof weil das hinkt weil ich jetzt im grunde genau die gleichen eingefärbt habe wie bei dem nachbarn elektro auch deswegen ergänzt wer das ganze mal angenommen wir haben erzielen darunter noch ein p und hier darunter eine weitere tipps und jetzt machen wir das ganze noch mal blau kommen uns nochmal einmal den nachbar see lektor an das heißt dieses ding hier das heißt wir am ersten neuen fischen generiert und beim nachbarn select fonds ist so besprechen diese typische nur an wenn der direkte nachbar ein tag ist wir gehen nach unten schauen dieses ding hier an ist der direkte nachbar von diesem devision tag ein deftig nein das ist ein tag deswegen wird auch nicht blau gemacht nächste frage div div geschwister selek tor steht dieses division tag denn irgendwo neben einem typischen tag und deswegen können wir das überspringen ob irgendwo daneben befindet sich das ist der gleiche eltern kind ebene und deswegen wird das hier bund wäre das an dieser stelle aber nicht blau das ist der unterschied zwischen den beiden selektieren und das war es auch schon zur theorie mit ein bisschen übung kriegt man das sicherlich auch zügig hin dass man das hier raus lesen kann gute grundvoraussetzungen ist es eben diese einrücken entsprechend zu haben dann passt das ganz gut im geiste kann man sich das dann noch so irgendwie aufmalen ich bin jetzt der meinung man sollte das vielleicht kurz so sich irgendwie vergegenwärtigen weil es eben im skript teil noch mal interessant wird wenn wir uns vererbung strukturen anschauen diese elektronen ich jetzt oben gemacht habe die zeige ich euch im nächsten video nochmal ganz kurz am computer in einer css datei und welche auswirkungen das dann haben kann darüber hinaus würde ich euch dann in dem video auch noch gerne einmal zeigen wie man verschiedene kombinationen noch für das elektron benutzen kann ganz kurz diese ganze kommentatoren geschichte muss man nicht ausreizen häufig macht es auch manchmal sind zu sagen okay ich mache meine neue klasse bevor ich irgendwie solche dinger schachtel allerdings wir haben jetzt häufiger schon gehört wenn nicht effizienten code schreiben möchte dann sollte man an der einen oder anderen stelle sich überlegen ob nicht vielleicht ein kombinat vor genauso viel sinn macht und deswegen machen wir das der vollständigkeit halber gott dass soviel zum theoretischen hintergrund und das nächste video ist dann eben der praktische teil