<!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"
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.