CSS nestede klasser

CSS er et stykke språk som legges til et annet front-end-designspråk, HTML for å opprette et nettsted eller en webside. For den interne og eksterne erklæringen om CSS, må vi erklære ID -er eller klasser med funksjonene vi ønsker å søke på HTML -innholdet.

CSS -klasse:

I CSS eller noe annet programmeringsspråk spiller klasser en viktig rolle når vi snakker om spesifikasjonen for et hvilket som helst element. I CSS opprettes klasser for å erklære et par stiler og effekter på HTML -elementene. Alle CSS -egenskapene er skrevet i klassekroppen ved å tilordne verdier til egenskapene. For eksempel:

.klassenavn
Eiendomsnavn: verdi;

En klasse er erklært med en prikk og klassenavn. Disse klassene får tilgang til HTML-innholdet når navnet på klassen er skrevet i de spesielle tagene- som vi gjorde for et av HTML-innholdet som avsnitt < p class= "class_name"> Dette er et avsnitt

Ved å nevne navnet blir alle egenskapene til en klasse brukt på innholdet. Hovedformålet med opprettelsen av denne klassen er at alle egenskapene og stilene skal få lov til HTML -innholdet på en gang.

Nestede klasser:

Akkurat som den enkle klassen er nestede klasser også opprettet mens du designer websidene. Det nestede fenomenet er ikke ukjent for utviklerne og designerne også fordi dette begrepet gjelder if-ests-setninger, på løkker og etc. Erklæringen om CSS -nestet klasse ligner på en eller annen måte de nestede løkkene. Ikke bare er klassen, men også HTML -tagger påvirkes av begrepet 'nestede klasser'. En HTML -tag av innhold er en gang erklært med et klassenavn. Deretter, i denne taggen, er den andre taggen av det 'samme' HTML -innholdet erklært med et annet klassenavn. Til slutt er begge taggene stengt samlet. Dette gjør den første taggen til den ytre og den andre taggen til en indre tag. Vi kan bruke mer enn en indre tag om gangen. Når klassenavnet er nevnt i de ytre taggene, trenger ikke alle indre tagger av annet HTML -innhold ytterligere å legge til noe klassenavn med dem.

tekst

tekst

Dette var erklæringen om klassenavnet inne i HTML -kroppen. Nå får vi se hvordan klassene er erklært i hodeseksjonen. Først blir klassen av den ytre HTML -taggen erklært og deretter den indre.

Dette er på en eller annen måte foreldre-barneklasse-forholdet. Fordi den ytre HTML -taggen, for eksempel, har taggen en klasse 'Class1'. Det er erklært sammen med avsnittinnholdet som:

.Klasse1 P

Vi kan ikke bruke avsnittklassen direkte. Tenk nå på en indre div -tag som har en annen klasse 'Class2'. For den nestede klassen vil vi legge til klassen på begge taggene. Den ytre og den indre div en.

.Class1 Class2 P

Dette er nødvendig for å spesifisere HTML -innholdet til klassen og til hvem det tilhører. Nå vil vi prøve noen eksempler for å utdype dette konseptet.

Eksempel 1:

I dette eksemplet legges enkel kroppsfarge ved å bruke HTML -taggen. Deretter brukes en div -tag.

Inne i denne diven brukes en overskrifter for å legge til en enkel overskrift. Et avsnitt brukes til å legge til en enkel setning. Begge taggene er ikke ledsaget av CSS -klassen fordi disse vil bli direkte stylet gjennom navnet på Div Container.

Nå inne i Div -taggen, før vi lukker denne diven, vil vi legge til en annen div med et nytt CSS -klassenavn.

Denne diven inneholder igjen både overskriften og avsnittene inni den. Lukk Div, den første avsluttende taggen er for den indre div, og den andre lukkekoden er for den ytre diven.

Lukk kroppskoden. I stilkoden til hodet, vil vi først erklære klassen for den første div 'container'. Overskriften på containerklassen får tilgang til klassenavnet til den ytre div.

.beholder H1
Font-størrelse: 24px;
Farge: Cyan;

Fontfarge og skriftstørrelse brukes på overskriften. Tilsvarende brukes avsnittet også av at CSS har samme skriftstørrelse og fargeegenskaper. Når det gjelder klassebeskrivelsen for den indre div, bruker vi alltid den ytre div -klassen sammen med den indre div -klassen og deretter elementene inne i Div. Dette er for å få tilgang til HTML -innholdet riktig. Vi har ikke direkte tilgang til klassen i Div bare med navnet, akkurat som foreldre-barn-klassen i arv. Først skriver vi foreldreklassenavnet og deretter barneklassen. På denne måten vil enhver tvetydighet angående flere foreldre og mer enn ett barns klasser bli fjernet.

.container .MyClass P
Fontstørrelse: 24;
Farge: lysgrønn;

Lukk alle de åpne taggene og lagre koden i Text Editor -filen som en HTML -utvidelse. Denne utvidelsen lar websiden vises i nettleseren.

På utførelsen vil du se at en svart bakkedrettet webside vil bli opprettet med alle overskrifter og avsnitt med samme justering og hierarki da de ble erklært med alle CSS-effektene. Dette er fordi stilarket inneholder CSS -egenskapen til klassen i samme sekvens som klassene som er definert i HTML -kodene.

Eksempel 2:

Dette eksemplet handler om bruk av en liste i HTML -koden. Den samme div med en klassebeholder brukes som en ytre div for nestede klasser. En enkel overskrift og avsnittsmerker brukes til innholdet i den ytre div. Etter det blir en indre div erklært med samme klasse. Denne DIV inneholder HTML uordnet liste med den.

Etter denne diven brukes en annen div inne i den andre diven til å lage nestede klasser. Denne DIV inneholder et annet klassenavn for å bli identifisert riktig.

< div class = "MyClass1" >

Inne i denne diven har vi brukt en overskrift og en uordnet liste. La oss nå se CSS -delen. Alle klasser og egenskaper er erklært på samme måte som vi gjorde i det siste eksemplet. Bare tillegget er klassen til den innerste eller 3. div.

.container .MyClass1 H1
Font-størrelse: 20px;
Farge: Hvit;

Lagre koden og utfør filen.

Du vil se at hver div og dens elementer blir brukt med effektene vi ga i CSS -klassene.

Konklusjon

CSS nestede klasser er en tilnærming til hierarkisk erklære klasser som forårsaker det ytre og indre fenomenet av taggene. Forsikre deg om at HTML -kodene vi skal implementere CSS -nestede klasser er av samme type, for eksempel en overskrift. Hvis et hierarki av klasseerklæringen endres eller sekvensen forstyrres, vil det være vanskelig å bruke CSS -egenskapene på HTML -innholdet i en nestet klasse. Vi har utdypet dette emnet ved å bruke to eksempler, ett med et enkelt indre innhold, mens det andre eksemplet inneholder to indre HTML -innhold.