Speciális elemválasztás a CSS-ben – technikák és példák

Álosztályok

A pszeudoosztályok lehetővé teszik egy elem meghatározott állapotainak vagy pozícióinak kiválasztását. Például :hover kijelöli az elemet, amikor az egérmutató fölötte van, :focus kijelöli az elemet, ha ki van jelölve vagy fókuszban van, :nth-child() kijelöl egy adott gyermekelemet egy csoportban.

Példák:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

Pszeudo-elemek

A pszeudoelemek lehetővé teszik virtuális elemek létrehozását egy meglévő elem testreszabásához.

Például ::before hozzon ::after létre elemeket egy elem előtt és után, ::first-line és ::first-letter válassza ki az elem első sorát és első betűjét.

Példák:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

Kombinátorok

A kombinátorok lehetővé teszik a szelektorok kombinálását az elemek kapcsolatuk alapján történő kiválasztásához. Például element1 element2 kijelöl element2 belül element1, element1 > element2 kijelöli a közvetlen gyermekelemeket element1, element1 + element2 kijelöli element2 közvetlenül az után element1.

Példák:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

Attribútumválasztók

Az attribútumválasztók lehetővé teszik az elemek kiválasztását attribútumuk értéke alapján. Például [attribute] olyan elemeket jelöl ki az attribútummal attribute, [attribute=value] amelyek attribútuma attribute egyenlő -val value, [attribute^=value] olyan elemeket jelöl ki, amelyek attribútuma -val attribute kezdődik value.

Példák:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

:not() választó

A választó lehetővé teszi olyan elemek kiválasztását, amelyek nem egyeznek egy adott szelektorral. Például olyan elemeket jelöl ki, amelyeknek nincs osztálya, vagy olyan elemeket, amelyek nem rendelkeznek azonosítóval. :not() :not(.class) class :not(#id) id

Példák:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

Ezek a példák a CSS speciális elemválasztását mutatják be. Ezeket a technikákat testreszabhatja és alkalmazhatja a weboldal elemeinek stílusához és testreszabásához.