CSS හරහා එය කළ නොහැකිය. එය "කඳුරැල්ල" හදවතට ගෙන යයි ;-).
කෙසේ වෙතත්, ඔබට ඔබේ පිටුවට ජාවාස්ක්රිප්ට් එක් කිරීමට හැකි නම්, jQuery ස්වල්පයක් ඔබේ අවසාන ඉලක්කය කරා ළඟා විය හැකිය. ඔබේ ඉලක්ක මූලද්‍රව්‍යය / පංතිය / හැඳුනුම්පත මත "ඉදිරියෙන් බැලීමට"
ඔබට jQuery භාවිතා කළ හැකිය find, ඉන්පසු ඔබේ ඉලක්කය තෝරා ගැනීමට පසුපසට යන්න.
ඔබේ මූලද්‍රව්‍යය සඳහා DOM (CSS) නැවත ලිවීමට ඔබ jQuery භාවිතා කරයි.
මයික් බ්‍රැන්ට්ගේ මෙම පිළිතුර මත පදනම්ව , පහත දැක්වෙන jQuery ස්නිපටය උදව් විය හැකිය.
$('p + ul').prev('p')
මෙය පළමුව <ul>a අනුගමනය කරන සියලුම s තෝරා ගනී <p>.
එය, මීට පෙර තේරීමට "backtracks" <p>බව කට්ටලයක් වෙතින්<ul> .
Query ලදායී ලෙස, "පෙර සහෝදරයා" jQuery හරහා තෝරාගෙන ඇත.
දැන්, .cssඑම මූලද්‍රව්‍යය සඳහා ඔබේ CSS නව අගයන් ලබා දීමට ශ්‍රිතය භාවිතා කරන්න.
මගේ නඩුවේදී මම හැඳුනුම්පත සමඟ ඩීඅයිවී එකක් තෝරා ගැනීමට ක්රමයක් සෙවීමට උත්සාහ කළෙමි #full-width, නමුත් එහි (වක්‍ර) පැවත එන ඩීඅයිවී පන්තියක් තිබේ නම් පමණි .companies.
මට යටින් ඇති සියලුම HTML පාලනය කළ .companiesනමුත් ඊට ඉහළින් ඇති ඕනෑම HTML එකක් වෙනස් කිරීමට මට නොහැකි විය.
කඳුරැල්ල යන්නේ දිශාව 1 ක් පමණි: පහළට.
මේ අනුව මට සියලු #full-widths තෝරා ගත හැකිය .
නැතහොත් මට තෝරා .companiesගත හැක්කේ එය අනුගමනය කිරීමෙන් පසුව පමණි #full-width.
නමුත් මම හැකි නොවේ තෝරා පමණක් #full-widthනොවන බව කීවේය .companies .
නැවතත්, මට එකතු කිරීමට නොහැකි විය .companies HTML හි වැඩි . HTML හි එම කොටස බාහිරව ලියා ඇති අතර අපගේ කේතය ඔතා.
නමුත් jQuery සමග, මම හැකි අවශ්ය තෝරා #full-widths, පසුව සුදුසු ආකාරයේ අනුයුක්ත:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
මෙය සියල්ල සොයා #full-width .companiesගන්නා .companiesඅතර CSS හි සම්මතයේ නිශ්චිත අංග ඉලක්ක කිරීමට තේරීම්කරුවන් භාවිතා කරන ආකාරයට සමාන ඒවා තෝරා ගනී .
ඉන්පසු එය .parents"පසුපසට" ගොස් සියළුම දෙමව්පියන් තෝරා ගැනීමට භාවිතා කරයි .companies,
නමුත් එම ප්‍රති results ල #fill-widthමූලද්රව්ය පමණක් තබා ගැනීමට පෙරහන් කරයි, එවිට අවසානයේදී
එය #full-widthමූලද්‍රව්‍යයක් තෝරා ගන්නේ .companiesපන්ති පරම්පරාවක් තිබේ නම් පමණි .
අවසාන වශයෙන්, එය ප්‍රති CS ලයක් ලෙස widthලැබෙන මූලද්‍රව්‍යයට නව CSS ( ) අගයක් පවරයි .
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
jQuery යොමු ලියකියවිලි:
$ () හෝ jQuery () : DOM මූලද්‍රව්‍යය.
. සොයන්න : තේරීම් කාරකයක්, jQuery වස්තුවක් හෝ මූලද්‍රව්‍යයක් මගින් පෙරහන් කරන ලද ගැලපෙන මූලද්රව්ය සමූහයේ එක් එක් මූලද්‍රව්‍යයේ පරම්පරාව ලබා ගන්න.
. දෙමව්පියන් : ගැලපෙන මූලද්රව්ය සමූහයේ එක් එක් මූලද්‍රව්‍යයට පෙර සහෝදරයා හෝ සහෝදරිය ලබා ගන්න. තේරීම් කාරකයක් සපයා ඇත්නම්, එය පෙර සහෝදරයා ලබා ගන්නේ එම තේරීම් කාරකයට ගැලපෙන්නේ නම් පමණි (ප්‍රති results ල පෙරහන් කරන්නේ ලැයිස්තුගත මූලද්රව්ය / තේරීම් ඇතුළත් කිරීමට පමණි).
. css : ගැලපෙන මූලද්රව්ය සමූහය සඳහා CSS ගුණාංග එකක් හෝ කිහිපයක් සකසන්න.