Bir CSS veli se├žici var m─▒?


Al─▒nan cevaba git


Ba─člant─▒ <li> ├Â─česinin do─črudan ├╝st ├Â─česi olan ├Â─čeyi nas─▒l se├žerim?

├ľrnek olarak, CSS'm ┼č├Âyle olur:

 li < a.active {
    property: value;
}
 

A├ž─▒k├žas─▒ bunu JavaScript ile yapman─▒n yollar─▒ var, ancak CSS D├╝zey 2'ye ├Âzg├╝ bir t├╝r ge├žici ├ž├Âz├╝m oldu─čunu umuyorum.

Bi├žimlendirmeye ├žal─▒┼čt─▒─č─▒m men├╝ bir CMS taraf─▒ndan da─č─▒t─▒l─▒yor, bu y├╝zden aktif ├Â─čeyi <li> ├Â─čeye ta┼č─▒yam─▒yorum ... (yapmamay─▒ tercih etti─čim men├╝ olu┼čturma mod├╝l├╝n├╝ tema olu┼čturmad─▒─č─▒m s├╝rece).

Herhangi bir fikir?


2951









Cevap say─▒s─▒n─▒ say: 30






CSS'de bir ├Â─čenin ebeveyni se├žmenin yolu yoktur.

Bunu yapman─▒n bir yolu olsayd─▒, mevcut CSS se├žicilerin ├Âzelliklerinden birinde olurdu:

Bu arada, bir ├╝st ├Â─če se├žmeniz gerekiyorsa JavaScriptÔÇÖe ba┼čvurman─▒z gerekir.


Se├žiciler Seviye 4 ├çal─▒┼čma Tasla─č─▒ bir i├žerir :has() ayn─▒ ┼čekilde ├žal─▒┼č─▒r s├Âzde s─▒n─▒f─▒ jQuery uygulamas─▒ . 2019 itibariyle, bu hala hi├žbir taray─▒c─▒ taraf─▒ndan desteklenmiyor .

:has() Orijinal soruyu kullanmak ┼ču ┼čekilde ├ž├Âz├╝lebilir:

 li:has(> a.active) { /* styles to apply to the li tag */ }
 

2361







├ťst ├Â─čeyi yaln─▒zca CSS'de se├žebilece─činizi d├╝┼č├╝nm├╝yorum.

Ancak zaten bir .active s─▒n─▒fa sahip oldu─čunuz gibi , o s─▒n─▒f─▒ li (yerine a ) ta┼č─▒mak daha kolay olacakt─▒r . Her iki eri┼čebilir Bu ┼čekilde li ve a sadece CSS ile.


146







Bu beti─či kullanabilirsiniz :

 *! > input[type=text] { background: #000; }
 

Bu, bir metin giri┼činin herhangi bir ebeveyni se├žecektir. Fakat bekleyin, daha ├žok var. ─░sterseniz, belirtilen bir ebeveyni se├žebilirsiniz:

 .input-wrap! > input[type=text] { background: #000; }
 

Veya aktif oldu─čunda se├žin:

 .input-wrap! > input[type=text]:focus { background: #000; }
 

Bu HTML'ye g├Âz at─▒n:

 <div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>
 

Etkin span.help oldu─čunda bunu se├žebilir input ve g├Âsterebilirsiniz:

 .input-wrap! .help > input[type=text]:focus { display: block; }
 

Daha bir├žok yetenek var; sadece eklentinin belgelerine g├Âz at─▒n.

BTW, Internet Explorer'da ├žal─▒┼č─▒yor.


119







Birka├ž ki┼či taraf─▒ndan belirtildi─či gibi, sadece CSS kullanarak bir ├Â─čenin ebeveyni / stillerini ┼čekillendirmenin bir yolu yoktur, ancak a┼ča─č─▒dakiler jQuery ile ├žal─▒┼č─▒r :

 $("a.active").parents('li').css("property", "value");
 

100







Ana se├žici yok; ├Ânceki karde┼č se├žicisinin olmad─▒─č─▒ gibi. Bu se├žicilere sahip olmaman─▒n iyi bir nedeni, bir s─▒n─▒f─▒n uygulan─▒p uygulanmayaca─č─▒n─▒ belirlemek i├žin taray─▒c─▒n─▒n bir ├Â─čenin t├╝m ├žocuklar─▒n─▒ ge├žmesi gerekti─čidir. ├ľrne─čin, e─čer yazd─▒ysan─▒z:

 body:contains-selector(a.active) { background: red; }
 

Ard─▒ndan, taray─▒c─▒n─▒n </body> sayfan─▒n k─▒rm─▒z─▒ olup olmad─▒─č─▒n─▒ belirlemek i├žin her ┼čeyi y├╝kleyip ayr─▒┼čt─▒rmas─▒n─▒ beklemek zorunda kalacakt─▒r .

Neden bir ebeveyn se├žiciye sahip de─čiliz makalesi onu ayr─▒nt─▒l─▒ olarak a├ž─▒kl─▒yor.


63







Bunu CSS 2'de yapman─▒n bir yolu yoktur. S─▒n─▒f─▒ a┼ča─č─▒dakilere ekleyebilir li ve ba┼čvuru yapabilirsiniz a :

 li.active > a {
    property: value;
}
 

53


2009-06-18





Evet: :has()

Taray─▒c─▒ deste─či: yok


52







Ge├žmek i├žin deneyin a i├žin block ekrana ve ard─▒ndan istedi─činiz herhangi bir stil kullan─▒n. a Eleman dolduracak li eleman ve istedi─činiz gibi kendi g├Âr├╝n├╝┼č├╝n├╝ de─či┼čtirmek m├╝mk├╝n olacak. li Dolgu de─čerini 0 olarak ayarlamay─▒ unutmay─▒n .

 li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}
 

34







CSS se├žicisi ÔÇť General Sibling Combinator ÔÇŁ belki istedikleriniz i├žin kullan─▒labilir:

 E ~ F {
    property: value;
}
 

Bu F , bir E ├Â─če taraf─▒ndan ├Ânce gelen herhangi bir ├Â─če ile e┼čle┼čir .


32







Bildi─čim kadar─▒yla CSS 2'de de─čil. CSS 3 daha g├╝├žl├╝ se├žicilere sahiptir, ancak t├╝m taray─▒c─▒larda tutarl─▒ bir ┼čekilde uygulanmaz. Geli┼čmi┼č se├žicilere ra─čmen, ├Ârne─činizde tam olarak belirtti─činiz ┼čeyi ba┼čaraca─č─▒na inanm─▒yorum.


26







OP'nin bir CSS ├ž├Âz├╝m├╝ arad─▒─č─▒n─▒ biliyorum ama jQuery kullanarak elde etmek kolayd─▒r. Benim durumumda ├žocukta bulunan <ul> bir <span> etiketin ebeveyn etiketini bulmam gerekiyordu <li> . jQuery :has se├žiciye sahiptir, b├Âylece ebeveynleri i├žerdi─či ├žocuklar taraf─▒ndan tan─▒mlamak m├╝mk├╝nd├╝r:

 $("ul:has(#someId)")
 

se├žecektir ul id ile bir alt ├Â─če i├žeren ├Â─čeyi SomeID . Veya as─▒l soruya cevap vermek i├žin, a┼ča─č─▒daki gibi bir hile yapmal─▒ (denenmemi┼č):

 $("li:has(.active)")
 

24







Bu, Selectors Level 4 spesifikasyonunun en ├žok tart─▒┼č─▒lan y├Ân├╝d├╝r . Bununla, bir se├žici, se├žiciden (!) Sonra bir ├╝nlem i┼čareti kullanarak ├žocu─čunu g├Âre bir ├Â─čeye stil uygulayabilecektir.

├ľrne─čin:

 body! a:hover{
   background: red;
}
 

kullan─▒c─▒ herhangi bir ├žapan─▒n ├╝zerine geldi─činde k─▒rm─▒z─▒ arka plan rengini ayarlar.

Ancak taray─▒c─▒lar─▒n uygulanmas─▒n─▒ beklemeliyiz :(


21







K├Âpr├╝y├╝ ├╝st ├Â─če olarak kullanmay─▒ deneyebilir ve ard─▒ndan hover ├╝zerindeki i├ž ├Â─čeleri de─či┼čtirebilirsiniz. Bunun gibi:

 a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}
 

Bu ┼čekilde, ana ├Â─čenin ge├ži┼čini temel alarak stili birden ├žok i├ž etiket i├žinde de─či┼čtirebilirsiniz.


20







S├Âzde eleman :focus-within , e─čer bir soydan oda─ča sahipse, ebeveynin se├žilmesine izin verir.

Bir tabindex ├Âzniteli─či varsa, bir ├Â─čeye odaklanabilir .

Odaklanma i├žin taray─▒c─▒ deste─či

tabindex

├ľrnek

 .click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
} 
 <div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div> 


19


2017-09-25





┼×u anda ebeveyn se├žicisi yok ve W3C m├╝zakerelerinin hi├žbirinde tart─▒┼č─▒lm─▒yor bile. ─░htiyac─▒m─▒z olup olmad─▒─č─▒n─▒ anlamam─▒z i├žin CSS'nin taray─▒c─▒ taraf─▒ndan nas─▒l de─čerlendirildi─čini anlaman─▒z gerekir.

Burada bir├žok teknik a├ž─▒klama var.

Jonathan Snook, CSS'nin nas─▒l de─čerlendirildi─čini a├ž─▒kl─▒yor .

Parent se├žicisinin g├Âr├╝┼čmelerinde Chris Coyier .

Harry Roberts yine verimli CSS se├žicileri yazarken .

Ancak Nicole Sullivan'─▒n olumlu trendlerle ilgili baz─▒ ilgin├ž ger├žekleri var .

Bu insanlar ├Ân u├ž geli┼čtirme alan─▒nda birinci s─▒n─▒f.


14







Yatay men├╝ i├žin sadece bir fikir ...

HTMLÔÇÖnin bir par├žas─▒

 <div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>
 

CSSÔÇÖnin bir par├žas─▒

 /* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }
 

G├╝ncelleme demosu ve kodun geri kalan─▒

https://jsfiddle.net/ilyabogdanov/o4fkL7kv/Metin giri┼čleriyle nas─▒l kullan─▒laca─č─▒n─▒ g├Âsteren ba┼čka bir ├Ârnek - ├╝st alan k├╝mesini se├žin


14







Web sitelerini tasarlarken ger├žekten yard─▒mc─▒ olabilecek baz─▒ standart d─▒┼č─▒ ├Âzellikler i├žerecek ┼čekilde CSS'yi geni┼čleten bir eklenti var. Buna EQCSS denir .

EQCSS'nin ekledi─či ┼čeylerden biri bir ebeveyn se├žicidir. T├╝m taray─▒c─▒larda ├žal─▒┼č─▒r, Internet Explorer 8 ve ├╝st├╝. ─░┼čte bi├žim:

 @element 'a.active' {
  $parent {
    background: red;
  }
}
 

B├Âylece burada her element ├╝zerinde bir eleman sorgusu a├žt─▒k a.active ve bu sorgunun i├žindeki stiller $parent i├žin mant─▒kl─▒ olan ┼čeyler var ├ž├╝nk├╝ bir referans noktas─▒ var. Taray─▒c─▒ ├╝st ├Â─čeyi bulabilir, ├ž├╝nk├╝ parentNode JavaScript'teki ile ayn─▒d─▒r.

─░┼čte bir demo $parent ve ba┼čka $parent Internet Explorer 8'de eserler oldu─čunu demo yan─▒ s─▒ra durumda bir ekran g├Âr├╝nt├╝s├╝ sizinle teste etraf─▒nda Internet Explorer 8'i yok .

EQCSS ayr─▒ca meta se├žicileri i├žerir : $prev se├žili bir ├Â─čeden ├Ânceki ├Â─če i├žin ve $this yaln─▒zca bir ├Â─če sorgusuna uyan ├Â─čeler ve daha fazlas─▒ i├žin.


12







Teknik olarak bunu yapman─▒n do─črudan bir yolu yoktur. Ancak, bunu jQuery veya JavaScript ile ├ž├Âzebilirsiniz.

Ancak, b├Âyle bir ┼čey de yapabilirsiniz.

 a.active h1 {color: blue;}
a.active p {color: green;}
 

jQuery

 $("a.active").parents('li').css("property", "value");
 

Bunu jQuery kullanarak yapmak istiyorsan─▒z, burada jQuery ebeveyn se├žicisinin referans─▒d─▒r .


11







W3C, bir taray─▒c─▒ ├╝zerindeki b├╝y├╝k performans etkisinden dolay─▒ b├Âyle bir se├žiciyi d─▒┼člad─▒.


9


2011-08-16





K─▒sa cevap HAYIR ; parent selector CSS'de bu a┼čamada bir durumumuz yok , ancak ├Â─čeleri veya s─▒n─▒flar─▒ yine de de─či┼čtirmeniz gerekmiyorsa, ikinci se├ženek JavaScript kullan─▒yor. Bunun gibi bir ┼čey:

 var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});
 

Veya uygulaman─▒zda jQuery kullan─▒yorsan─▒z daha k─▒sa bir yol :

 $('a.active').parents('li').css('color', 'red'); // Your property: value;
 

8







─░┼čte pointer-events ile kullanarak bir kesmek hover :

 <!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html> 


8







┼×imdi 2019 ve CSS Yerle┼čtirme Mod├╝l├╝n├╝n son tasla─č─▒ asl─▒nda b├Âyle bir ┼čeye sahip. Tan─▒t─▒m─▒ @nest at-kurallar.

3.2. Yerle┼čtirme Kural─▒: @nest

Do─črudan yuvalama iyi g├Âz├╝kse de, biraz k─▒r─▒lgand─▒r. .Foo & gibi baz─▒ ge├žerli yuvalama se├žicilere izin verilmez ve se├žiciyi belirli ┼čekillerde d├╝zenlemek kural─▒ beklenmedik ┼čekilde ge├žersiz k─▒labilir. Ayr─▒ca, baz─▒ insanlar yuvalamay─▒ g├Ârsel olarak ├ževre bildirimlerden ay─▒rt etmek i├žin zor buluyorlar.

T├╝m bu sorunlara yard─▒mc─▒ olmak i├žin, bu ┼čartname, ge├žerli stil kurallar─▒n─▒n nas─▒l ge├žerli ┼čekilde yerle┼čtirilece─či konusunda daha az k─▒s─▒tlama getiren @nest kural─▒n─▒ tan─▒mlar. S├Âzdizimi:

@nest = @nest <selector> { <declaration-list> }

@Nest kural─▒ stil kural─▒na ayn─▒ ┼čekilde ├žal─▒┼č─▒r: bir se├žiciyle ba┼člar ve se├žicinin e┼čle┼čti─či ├Â─čelere uygulanan bildirimleri i├žerir. Tek fark, @nest kural─▒nda kullan─▒lan se├žicinin yuva i├žeren olmas─▒ gerekti─čidir, yani i├žinde bir yerde bir yuva se├žici i├žerir. Bireysel liste se├žicilerin t├╝m├╝ yuva i├žeriyorsa, se├žicilerin listesi yuva i├žerir.

(Yukar─▒daki URLÔÇÖden kopyalay─▒p yap─▒┼čt─▒r─▒n).

Bu ┼čartname alt─▒nda ge├žerli se├žici ├Ârnekleri:

 .foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */
 

7







┼×u anda standart CSS'de ana se├žici olmamas─▒na ra─čmen , 7 yeni se├žiciden her ikisini de i├žeren balta (yani Art─▒r─▒lm─▒┼č CSS Se├žici S├Âzdizimi / ACSSSS ) adl─▒ bir ki┼čisel proje ├╝zerinde ├žal─▒┼č─▒yorum :

  1. Bir hemen ├╝st se├žici < (ters se├žim sa─člar > )
  2. Bir herhangi bir soy se├žme ^ (ters se├žim sa─člar [SPACE] )

ax ┼ču anda nispeten erken bir BETA geli┼čim a┼čamas─▒ndad─▒r.

Burada bir demo g├Âr├╝n:

http://rounin.co.uk/projects/axe/axe2.html

(Soldaki standart listelerle soldaki iki listeyi ve sa─čdaki se├ženeklerle balta se├žiciler ile kar┼č─▒la┼čt─▒r─▒n)


5







En az─▒ndan CSS 3'e kadar ve bu ┼čekilde se├žim yapamazs─▒n─▒z. Ancak g├╝n├╝m├╝zde JavaScript'te olduk├ža kolay bir ┼čekilde yap─▒labilir, kodun olduk├ža k─▒sa oldu─čuna dikkat edin, biraz vanilya JavaScript eklemelisiniz.

 cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
    //console.log(el.nodeName)
    if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
        console.log(el)
    };
}); 
 <div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div> 


4







Hay─▒r, ├╝st ├Â─čeyi yaln─▒zca CSS'de se├žemezsiniz.

Ancak zaten bir .active s─▒n─▒fa sahip oldu─čunuz gibi , o s─▒n─▒f─▒ li (yerine a ) ta┼č─▒mak daha kolay olacakt─▒r . Her iki eri┼čebilir Bu ┼čekilde li ve a sadece CSS ile.


3







Herhangi bir fikir?

CSS 4, baz─▒ kancalar─▒n geriye do─čru y├╝r├╝mesine katk─▒da bulunuyorsa, fantezi olacakt─▒r . O zamana kadar (ger├ži m├╝mk├╝nd├╝r de─čil tavsiye) kullanmak i├žin checkbox ve / veya radio input s i├žin k─▒rmak da CSS normal kapsam─▒ d─▒┼č─▒nda ├žal─▒┼čmas─▒na izin ┼čeyler ba─čland─▒─č─▒ndan emin zamanki ┼čekilde ve bu yoluyla ...

 /* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* &#9660; - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* &#9660; - Down Arrow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
} 
 <!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div> 

... olduk├ža Br├╝t , ama dokunma ve yeniden dokunmatik ┼čey m├╝mk├╝nd├╝r ama sadece CSS ile ve HTML body ve :root hemen her yerden ba─člayarak id ve for ├Âzelliklerini radio / checkbox input s ve label tetikleyiciler ; Muhtemelen birisi bir noktada bunlara nas─▒l dokunulaca─č─▒n─▒ g├Âsterecektir.

Ek bir uyar─▒, belirli bir belki kullan─▒lan, yaln─▒zca bir input tanesinin id ilk ├Ânce checkbox / ba┼čka bir deyi┼čle ge├ži┼čli bir durum radio kazanmas─▒d─▒r ... Ancak, birden fazla etiketin hepsi ayn─▒ ┼čeyi g├Âsterebilir input , ancak hem HTML hem de CSS daha da hassast─▒r.


... CSS Level 2'ye ├Âzg├╝ bir t├╝r ge├žici ├ž├Âz├╝m oldu─čunu umuyorum.

Di─čer : se├žicilerden emin de─čilim , ama :checked CSS ├Âncesi 3 i├žin. Ben do─čru hat─▒rl─▒yorsam, bu [checked] y├╝zden yukar─▒daki kodda bulabilece─činiz bir ┼čeydi , ├Ârne─čin,

 .menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}
 

... ::after ve ve gibi ┼čeyler i├žin :hover , ilk olarak hangi CSS versiyonunun g├Âr├╝nd├╝─č├╝nden emin de─čilim.

Bunlar─▒n hepsi, l├╝tfen bunu ├╝retimde kullanmay─▒n, ├Âfkeyle bile kullanmay─▒n. Bir ┼čaka olarak, ya da ba┼čka bir deyi┼čle, sadece bir ┼čeyler yap─▒labilece─či i├žin her zaman olmas─▒ gerekti─či anlam─▒na gelmez .


3







Sass'ta ve i┼čaretiyle m├╝mk├╝n :

 h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px
 

CSS ├ž─▒k─▒┼č─▒:

 h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
 

2







Alt ├Â─čeye g├Âre ├╝st ├Â─čenin de─či┼čtirilmesi ┼ču anda yaln─▒zca <input> ├╝st ├Â─čenin i├žinde bir ├Â─čemiz oldu─čunda ger├žekle┼čebilir . Bir giri┼č odakland─▒─č─▒nda, kar┼č─▒l─▒k gelen ├╝st ├Â─če, CSS kullan─▒larak etkilenebilir.

A┼ča─č─▒daki ├Ârnek, :focus-within CSSÔÇÖde kullanmay─▒ anlaman─▒za yard─▒mc─▒ olacakt─▒r .

 .outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
} 
 <div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div> 


0







Bunu yapmak i├žin baz─▒ JavaScript kodlar─▒ kullan─▒rd─▒m. ├ľrne─čin, bir dizi ├╝zerinde yineleme yaparken React'te, ├╝st bile┼čenine ├žocuklar─▒n─▒z─▒ i├žerdi─čini g├Âsteren ba┼čka bir s─▒n─▒f ekleyin:

 <div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>
 

Ve sonra basit├že:

 .parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}
 

0







@document

Teknik olarak bir ana se├žici olmasa da , alaca─č─▒n─▒z gibi "ana" olan sayfa URL'sini se├žmenize izin verir. L├╝tfen bunun i├žin savunuculuk yapman─▒z gerekti─čini unutmay─▒n (daha fazla talimat i├žin bu yaz─▒n─▒n alt─▒na bak─▒n). Bu yaz─▒ web yazarlar─▒ taraf─▒ndan uygulanabilir hale geldi─činde bu yaz─▒y─▒ g├╝ncelleyece─čim.

background-image Her sayfa i├žin gezinti ba┼čl─▒─č─▒n─▒ de─či┼čtirmek istedi─činizi varsayal─▒m . HTMLÔÇÖniz genellikle a┼ča─č─▒dakilere benzer:

 <body>

<main id="about_"></main>

<header><nav></nav></header>

</body>
 

Ve ├Â─čelerine bir id ├Âznitelik eklemek , profesyonel de─čildir ve Web 3.0 ile uyumlu de─čildir. Ancak, URL'yi se├žerek, herhangi bir ┼čekilde herhangi bir HTML kodu eklemeniz gerekmez: head body

 @document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}
 

E─čer ├ç├╝nk├╝ olan profesyonel (├Âylesin, de─čil mi?) E─čer her zaman canl─▒ sunucuya da─č─▒tmadan ├Ânce kodunuzu yerel test edin. Yani statik URL'ler ├╝zerinde ├žal─▒┼čmak i├žin gidi┼č de─čildir localhost , 127.0.0.1 , :1 benzeri ve - varsay─▒lan olarak . Bu, ba┼čar─▒l─▒ bir ┼čekilde test etmek ve kodunuzu do─črulamak i├žin, CSS'inizde sunucu taraf─▒ komut dosyas─▒ ├žal─▒┼čt─▒rman─▒z gerekece─čini belirtir. Bu ayn─▒ zamanda, kullan─▒c─▒lar─▒n sitenizde CSS ├žal─▒┼čt─▒rmas─▒na izin verirseniz , CSS kodlar─▒n─▒n sizinkiler olsa da sunucu taraf─▒nda komut dosyas─▒ ├žal─▒┼čt─▒rmad─▒─č─▒ndan emin olman─▒z gerekti─čini belirtir . G├Ârevin bu b├Âl├╝m├╝n├╝ yararl─▒ bulabilecek ├žo─ču insan , ona nas─▒l yakla┼čaca─č─▒ndan emin olmayabilir ve bunlar─▒n hepsi i┼č ortam─▒n─▒z─▒ nas─▒l organize etti─činize ba─čl─▒ olacakt─▒r.

  1. Yerel ortam─▒n─▒z─▒ her zaman RAID 1, 5, 6, 1 + 0 veya 0 + 1'de ├žal─▒┼čt─▒r─▒n (genellikle varolmayan "RAID 10" ve 0 + 1 ve 1 + 0 ├žok farkl─▒ hayvanlar oldu─ču i├žin yanl─▒┼č ).
  2. ├çal─▒┼čman─▒z─▒ ( ve ki┼čisel dosyalar─▒n─▒z─▒) i┼čletim sisteminizle ayn─▒ s├╝r├╝c├╝de saklamay─▒n ; E─čer olur sen ya da olmamak ruh olman─▒za sonunda yeniden bi├žimlendirme olmak.
  3. K├Âk yolu (bir WAMP (Windows, Apache, mariadb ve PHP) sunucusu ├╝zerine) B├Âyle bir ┼čey g├Âr├╝nmelidir: D:\Web\Version 3.2\www.example.com\ .
  4. PHP ile ba┼člayacakt─▒r $_SERVER['DOCUMENT_ROOT'] ( if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} ko┼čuluyla bir Linux i┼čletim sistemi belirleyebilirsiniz ).
  5. Eski s├╝r├╝mlerin kopyalar─▒n─▒ saklars─▒n─▒z, ├ž├╝nk├╝ bir ┼čeyi unutup bozdu─čunuz takdirde ├žal─▒┼čma kopyalar─▒n─▒ g├Ârmeniz gerekir;

A┼ča─č─▒dakiler, canl─▒ sunucunuzun kulland─▒─č─▒n─▒ varsayar www. ( https://example.com/ yerine https://www.example.com/ ):

 <?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_HOST']);

 if (stristr($_SERVER['HTTP_HOST'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>
 

$a D├Ânecektir iki URL'nizin par├žalar─▒. ├ľn sayfan─▒z veya web sitenizin k├Âk URL'si, bir kez siz veya dizeleri kar┼č─▒la┼čt─▒r─▒rken oldu─ču gibi / olacakt─▒r . Bu size yolun% 80'ini (hem yerel hem de canl─▒ testler i├žin) kazand─▒racak, b├Âylece ayn─▒ kodu her iki ortamda da ├žal─▒┼čt─▒rabilir ve URL'leri yeniden olu┼čturmak i├žin CSS'de kullanabilirsiniz. about/ explode split

Taray─▒c─▒ Deste─či

2019 itibariyle sadece Gecko 61+ bu ├Âzelli─či destekliyor ve sadece bayra─č─▒n arkas─▒nda. Zaten web yazarlar─▒ taraf─▒ndan kullan─▒labilece─čini savundum. David Baron, CSS Ko┼čullu Kurallar Mod├╝l├╝ Seviye 3'├╝n yazar─▒d─▒r . Ger├žek bir CSS "ana se├žici" bulunmamas─▒n─▒n en ├Ânemli nedeni performans etkisidir; bu y├Ântem performans etkisini olumsuz etkileyecektir. Ayr─▒ca, g├Âreli URLÔÇÖlerin HTML base ├Â─česinin varl─▒─č─▒nda desteklenmesi gerekti─čini savundum. Bunu 2019 y─▒l─▒ndan uzun bir s├╝re sonra okuyor veya okumuyorsan─▒z (47.632 y─▒l─▒ndaki herkese merhaba!) L├╝tfen ├Ânce a┼ča─č─▒daki URLÔÇÖleri referans al─▒n:


-1


2019-06-21

─░lgili yay─▒nlar


Belirli metni i├žeren elemanlar i├žin bir CSS se├žici var m─▒?

Sadece ilk do─črudan ├žocuk i├žin bir CSS se├žici var m─▒?

CSS kullanarak alt DIV'nin geni┼čli─čini ├╝st DIV'den daha geni┼č yapman─▒n bir yolu var m─▒?

Bu CSS se├žici nedir? [S─▒n─▒f * = ÔÇťyay─▒lmaÔÇŁ]

S─▒n─▒f ├Ânekine g├Âre bir CSS se├žici var m─▒?

Metin d├╝─č├╝mleri i├žin bir CSS se├žici var m─▒?

Se├žiciye e┼čit olmayan bir CSS var m─▒?

CSS'de fare a┼ča─č─▒ se├žicisi nedir?

Tan─▒mlay─▒c─▒lar i├žin bir joker se├žici var m─▒ (id)?

C# ile kullan─▒labilecek bir jQuery benzeri CSS / HTML se├žici var m─▒?

Etiketle ilgili di─čer sorular [css]


Bir birle┼čme ├žat─▒┼čmas─▒yla kar┼č─▒la┼čt─▒m. Birle┼čtirmeyi nas─▒l iptal edebilirim?

Veritaban─▒ endeksleme nas─▒l ├žal─▒┼č─▒r? [kapal─▒]

S├Âzler ve G├Âzlenebilirler aras─▒ndaki fark nedir?

PHP rasgele dize ├╝reteci

Temel ÔÇťUzun ├ça─č─▒rmay─▒ÔÇŁ nas─▒l uygular─▒m?

Python'daki tek t─▒rnak i┼čaretleri ve ├žift t─▒rnak i┼čaretleri [kapal─▒]

Argparse iste─če ba─čl─▒ konumsal arg├╝manlar?

Twitter Bootstrap'i kullanarak nas─▒l merkezli i├žerik elde edersiniz?

S─▒n─▒f tan─▒mlar─▒n─▒z i├žin * .h veya * .hpp

├ľzel statik ├╝yeler C++ 'ta nas─▒l ba┼člat─▒l─▒r?