<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

    <button id="siblings">h4 etiketinin kardeş etiketlerini seç</button>
    <button id="siblings-h3">h4 etiketinin kardeş etiketlerinden h3 etiketlerini seç</button>
    <button id="next">h4 etiketinden sonra gelen ilk kardeş etiketi seç</button>
    <button id="next-all">h4 etiketinden sonra gelen tüm kardeş etiketleri seç</button>
    <button id="next-until">h4 etiketinden sonra gelen kardeş etiketlerden span etiketine kadar olanları seç</button>
    <button id="prev">h4 etiketinden önce gelen ilk kardeş etiketi seç</button>
    <button id="prev-all">h4 etiketinden önce gelen tüm kardeş etiketleri seç</button>
    <button id="prev-until">h4 etiketinden önce gelen kardeş etiketlerden h3 etiketine kadar olanları seç</button>

    <div>
        div (ebeveyn)
        <h3>h3 (kardeş)</h3>
        <h5>h5 (kardeş)</h5>
        <h4>h4 (kardeş)</h4>
        <p>p (kardeş)</p>
        <span>span (kardeş)</span>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

body {
    margin: 20px;
    font-size: 18px;
}

button {
    padding: 10px;
    margin-right: 8px;
    margin-bottom: 18px;
    background-color: tomato;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

div {
    max-width: 500px;
}

div,
div * {
    display: block;
    border: 2px solid lightgrey;
    color: grey;
    padding: 5px;
}
$(document).ready(function() {

    function clearBorder(){
        $("div *").css({
            "border": "2px solid lightgrey",
            "color": "grey",
        });
    }

    $("#siblings").click(function() {
        clearBorder();
        $("h4").siblings().css({"color": "red", "border": "2px solid red"});
    });

    $("#siblings-h3").click(function() {
        clearBorder();
        $("h4").siblings("h3").css({"color": "red", "border": "2px solid red"});
    });

    $("#next").click(function() {
        clearBorder();
        $("h4").next().css({
            "color": "red",
            "border": "2px solid red"
        });
    });

   $("#next-all").click(function() {
        clearBorder();
        $("h4").nextAll().css({
            "color": "red",
            "border": "2px solid red"
        });
    });

    $("#next-until").click(function() {
         clearBorder();
        $("h4").nextUntil("span").css({
            "color": "red",
            "border": "2px solid red"
        });
    });

    $("#prev").click(function() {
         clearBorder();
        $("h4").prev().css({
            "color": "red",
            "border": "2px solid red"
        });
    });

    $("#prev-all").click(function() {
         clearBorder();
        $("h4").prevAll().css({
            "color": "red",
            "border": "2px solid red"
        });
    });

    $("#prev-until").click(function() {
         clearBorder();
        $("h4").prevUntil("h3").css({
            "color": "red",
            "border": "2px solid red"
        });
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.