ფსევდო კლასი და ფსევდო ელემენტი

21-02-2021, 12:53

ფსევდო კლასი ობიექტს ანიჭებს რაიმე თვისებას მაშინ, როცა მასზე ხორციელდება მოქმედება. მაგალითად მაუსის მიტანა ობიექტზე ან დაკლიკება.
ფსევდო ელემენტი თავდაპირველად არ არის html კოდში.ის გაჩნდება საიტზე css თვისების საშუალებით.
ყველაზე ხშირად გამოიყენება ფსევდო კლასები :hover და :focus.
ქვემოთ მოცემულ კოდებში ნაჩვენებია მისი გამოყენების მაგალითები, აგრეთვე ფსევდო ელემენტების მაგალითებიც.
თუ გადავალთ ბმულზე ვნახავთ ფსევდო კლასების და ფსევდო ელემენტების ჩამონათვალს შესაბამისი მაგალითებით.

HTML კოდი:

<!DOCTYPE HTML>
<html>
    <header>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>ფსევდო კლასი და ფსევდო ელემენტი</title>
        <link  href="style.css" type="text/css" rel="stylesheet" />
    </header>
    <body>
    
        <center>
        <br>
            <p><a href="https://www.w3schools.com/css/css_pseudo_classes.asp"
                 class="pseudo" target="_blank">PSEUDO-CLASS</a>
            </p>
            <hr>
            <p>FOCUS:<input type="text" ></p>

            <table width="500">                
                <tr>
                    <td>ნიკოლოზ</td>
                    <td>აფხაზავა</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>ანასტასია</td>
                    <td>ბოლქვაძე</td>
                    <td >12</td>
                </tr>
                <tr>
                    <td>გიორგი</td>
                    <td>ტატალაშვილი</td>
                    <td >12</td>
                </tr>
                <tr>
                    <td>ანანო</td>
                    <td>ხუბუნაია</td>
                    <td >12</td>
                </tr>
                <tr>
                    <td>ნინია</td>
                    <td>მიქაუტაძე</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>ნინი</td>
                    <td>გულედანი</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>ნია</td>
                    <td>მაჭარაშვილი</td>
                    <td>12</td>
                </tr>
            </table>
            
        <h4>ფსევდო ელემენტები</h4>
        
        <h3>before</h3>
        <h2>after</h2>
    <!--<h1>Select some text on this page:</h1> -->
        <div class="arrow"><p>._.</p></div>
        <br><br><br><br>
        </center>
    </body>
</html>

და CSS კოდი:

.pseudo{
    color: #DCEBF4FF;
    font-size: 22px;
    text-decoration: none;
    background: #F4186CFF;
    padding: 5px;
}

.pseudo:hover{
    color: #1920A0FF;
    text-decoration: underline;
    background: #F4CA16FF;
    //font-size: 28px;
}

input:focus{
     background-color: yellow;
     color: #1400F4FF;
     //font-size: 22px;
}

table{
    font-size: 22px;
    text-align: center;
}

table tr:first-child{
    color: rgb(116, 6, 6);
}

table tr:last-child{
    color: blue;
}

table tr:nth-child(2n){
    background: yellow;
}

table tr:nth-child(2n+1){
    background: #64A079FF;
}

h3::before{
    content: "ეს ქართული ტექსტი არ არსებობს \"ეიჩთიემელ\"-ში  ";
}

h2::after{ 
  content: " -  ეს ქართული ტექსტი არ არსებობს \"ეიჩთიემელ\"-ში";
}

/*
h1::selection{
  color: red;
  background: yellow;
}
*/

.arrow p{
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 45px;
    border: 1px solid blue;
    border-radius: 50%;
    font-weight: 700;
}
.arrow p:hover{
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    line-height: 50px;
}
.arrow p:hover::before{
    content: "/\\";
}
 .arrow p:hover::after{
    content: "/\\";    
}

ეს კი შესამამისი სურათი:

ფსევდო კლასი და ფსევდო ელემენტი

მსგავსი სიახლე