CSS Notfirst-Child Property

CSS Notfirst-Child Property
Arkusz stylów kaskadowych to kod, który wpływa na elementy kodu HTML. Połączony efekt tworzy strony internetowe i strony internetowe. Każdy język programowania, który jest używany na zapleczu, najlepiej wykorzystuje HTML i CSS do opracowania i zaprojektowania frontu dla Witryny. Te dwa są odpowiedzialne za statyczne strony internetowe. HTML i CSS wraz z JavaScript odgrywają głównie rolę w tworzeniu dynamicznej strony internetowej. W tym artykule HTML i CSS zostaną użyte do zobaczenia utworzonej strony internetowej.

Czasami spotykamy taką sytuację, w której chcemy uniknąć niektórych przedmiotów lub zawartości między grupą tych samych elementów. Określenie ich ręcznie kosztuje czas. Aby uniknąć konsumpcji czasu, CSS odnosi się do tak skutecznych i wydajnych właściwości, aby wykorzystać je w kodzie, który jest dość łatwo zrozumiały i sprawia, że ​​kod jest zarządzany. Odbywa się to przez CSS „nie pierwszą” właściwość.

Nie: własność pierwszego dziecka

Ta właściwość CSS służy do wyboru całej zawartości HTML tego samego typu innego niż pierwsza. Ta właściwość jest przeciwna do właściwości CSS „CSS pierwszego typu”, która jest odpowiedzialna za wpływanie tylko na pierwszą z większości zawartości HTML tego samego typu. Oprócz dodawania stylu do wszystkich tagów przez wbudowane CSS Unikanie pierwszego, nie: właściwość pierwszego dziecka usunęła dwuznaczność, która jest tworzona przez bałagan wbudowanego CSS, który sprawia, że ​​kod jest trudny do zrozumienia i skomplikowany. Dodajemy tylko niewielki kawałek kodu w wewnętrznym lub zewnętrznym CSS, określając zawartość HTML, w której chcemy zastosować tę właściwość. Wtedy automatycznie dotknięty jest pierwsze dziecko.

Składnia:
Składnia właściwości not: pierwszorzędna jest następująca:

Content_name: not (: First-Child)
Wartość nieruchomości; \\ Każdy efekt, który chcemy zastosować na elementach HTML innych niż pierwszy.

Przykład 1: nie: pierwszy dziecko akapitu

Aby rozwinąć koncepcję braku pierwszego dziecka, używamy

akapity treści HTML w celu zastosowania tej właściwości. Akapity to zawartość HTML, o której mówi się, że to kilka linii tekstowych. Te linie są sekwencjonowane i wyrównane w taki sposób, aby utworzyć akapit. Kod zawiera znacznik ciała. Używamy dwóch prostych nagłówków i trzech akapitów, które zawierają z nimi prosty tekst kilku słów. Używamy przykładowego tekstu Lorema ipsum.

Musimy tylko zobaczyć wyniki nieruchomości. Aby było to dość proste, tylko ta treść jest zadeklarowana. Następnie zamknij znaczniki ciała.

Sekcja główna zawiera tylko tag stylu, dzięki czemu jest wewnętrznym CSS.

Użyj znacznika akapitu

z nieruchomościami nie: pierwszorzędnym, aby zastosować wszystkie skutki na wszystkie akapity, z wyjątkiem pierwszego. Dodajemy kolor czerwonej czcionki do akapitów. Zamknij wszystkie otwarte tagi.

Zapisz kod z rozszerzeniem HTML do edytora tekstu. To rozszerzenie sprawia, że ​​ikona pliku jako domyślna przeglądarka. Ta ikona zapewnia, że ​​plik jest stroną internetową.

Przykład 2: Nie: pierwszy dziecko na liście

Listy HTML są ważnym sposobem reprezentowania tekstu. Aby wdrożyć właściwość CSS selektora pierwszego dziecka, używamy dwóch list. Aby rozwinąć dalej, najpierw musimy mieć wiedzę na temat list HTML. Dwa typy list są tworzone za pośrednictwem języka HTML - lista nieopisana

    i uporządkowana lista
      . Sposób deklarowania jest dla nich taki sam. Wewnątrz
        I
          , Wszystkie elementy są napisane
        1. tagi.


          • element1

          • element2

          Teraz, wracając do przykładu, użyliśmy dwóch nieopisanych list. Obie listy są zadeklarowane w Div. Najpierw rozważ sekcję ciała HTML kodu. Dwa proste nagłówki,

          I

          , są zadeklarowane. Następnie znacznik DIV jest używany do deklarowania kontenera Div. Wewnątrz div, pierwszy

            Lista jest zadeklarowana. Dodano wbudowane CSS dla nieruchomości marginesowej. Ta właściwość marginesu jest również stosowana w drugim DIV.

              Właściwość marginesu to wartość CSS odległości obiektu od granicy wyświetlania tła. Na przykład margines listy jest deklarowany do utworzenia listy w określonej odległości.

              Obie listy są zadeklarowane podobnie posiadające trzy elementy listy. Teraz zamknij wszystkie tagi i skieruj się w kierunku wewnętrznego CSS. Nagłówek jest stosowany przez właściwość czcionki. Następnie główna część kodu nie: właściwość pierwszego dziecka jest stosowana.

              Ta właściwość jest stosowana na

                tag, ponieważ obie listy są nieuporządkowane. Ale upewnij się, że listy te leżały niezależnie lub są obecne w dowolnym innym pojemniku. Jak wiemy, że zadeklarowaliśmy obie listy wewnątrz div, musimy wspomnieć o Div z
                  tag tak, aby właściwość była stosowana na wszystkich listach wewnątrz div, z wyjątkiem pierwszego.

                  Div ul: nie (: pierwsza dziecko)
                  Kolor tła: fioletowy;
                  Kolor biały;
                  Font-Weight: Bold;
                  Szerokość: 40%;

                  Div i

                    są stosowane z cechami posiadania koloru tła i koloru czcionki. Waga czcionki jest ustawiona na odważne. Szerokość listy jest również zadeklarowana.

                    Zamknij wszystkie tagi. Zapisz plik i zaimplementuj go w przeglądarce, aby zobaczyć wyniki.

                    Zobaczysz, że pierwsza lista pojawia się domyślnie bez żadnych zmian. Podczas gdy na drugą listę wpływają wszystkie wartości i właściwości, które zastosowaliśmy do znacznika listy nieopisanej w sekcji głównej.

                    Podobnie, jeśli zastosujemy jakąkolwiek nieruchomość do wszystkich

                      Tagi, tak jak my wcześniej, ale bez użycia właściwości nie: pierwszego dziecka dla list, co się stanie?

                      Div ul
                      Styl czcionki: Kursywa;

                      Ustawiliśmy styl czcionki na kursywę we wszystkich UL Div. Ale wartości zapisane w nielegalnej właściwości selektora dzieci są stosowane na wszystkich listach oprócz pierwszej.

                      Zastosuj oba style na ten sam kod nadwozia. Zapisz i zaimplementuj. Widzimy, że styl kursywy jest stosowany na wszystkich elementach listy, ponieważ nie wspominaliśmy o nie: właściwości pierwszego dziecka z nimi. Podczas gdy wartości, które mają selektor, są stosowane tylko na drugiej liście.

                      Wniosek

                      CSS not: pierwszy dziecko daje nam wiedzę na temat stosowania właściwości CSS na wszystkich elementach HTML, a nie pierwszego. Warunkiem wdrożenia tego zjawiska jest to, że cała zawartość HTML musi być tego samego typu, w przeciwnym razie efekt ten nie zostanie zastosowany. Od samego początku rozmawialiśmy o podstawowym użyciu HTML i. Następnie CSS nie: pierwsza dziecko jest wyjaśnione przez podanie składni, po której następuje zastosowanie tej właściwości. Następnie wdrożyliśmy tę koncepcję w dwóch różnych zawartości HTML: jeden to akapit, a drugi to kontener Div.