Πρόβλημα με nth-child

[tequillaki]

Καλησπέρα. Έχω έναν html κώδικα του στιλ:

<div class="q">
  <a href="">a</a>
  <span>afsdasd</span>
  <a href="">b</a>
  <span>afsdasd</span>
<div>

Δεν έχω πρόσβαση στον html κώδικα ή να προσθέσω ένα js. Προσπαθώ μέσω css να στοχεύσω το 2ο a. Ο τρόπος που ξέρω είναι με το nth-child.

.q a:nth-child(2) { }

Όμως δεν μου δουλεύει με τίποτα. Δοκίμασα και με :last-child και πάλι τίποτα. Όταν στοχεύω όλα τα a δουλεύει κανονικά, άρα προφανώς το :nth-child έχει πρόβλημα. Πολύ συχνά χρησιμοποιώ το nth-child και δεν μου δουλεύει. Μήπως ξέρετε για ποιο λόγο δεν λειτουργεί και πως αλλιώς μπορώ να στοχεύσω αυτό που θέλω;

[dominotrix]

Πατησε F12 και μετα πανε στο στοιχειο αυτο, πατησε δεξι κλικ στον Inspector και επελεξε Copy -> CSS Selector.

 

Θα σου κανει copy το ακριβες element που θελεις.

 

http://oi63.tinypic.com/2eezdat.jpg

 

 

Εχεις βαλει nth-child το οποιο σημαινει να παρει το 2ο παιδι. Ασχετα που εβαλες a: αυτο παει και περνει το 2ο παιδι το οποιο ομως ειναι το span. Αν δεις παρακατω βαζω το 3o παιδι γιατι αυτο ειναι το a που θελεις να επιλεξεις.

 

Η πιο σωστη χρηση (αν θελεις να επιλεξεις το 2ο a, θα ηταν να χρησιμοποιησεις το a::nth-of-type(2)

.q a:nth-child(3){ }

[tequillaki]

Ωραίος ρε φίλε.

Μια ερώτηση όμως:

Μου έβγαλε αυτόν τον selector:

#breadcrumb > div > a:nth-child(3)

Γιατί είναι nth-child(3) και όχι 2; Χάνω κάπου τη λογική του; Ορίστε το html:

<div id="breadcrumb">
  <h2 class="element-invisible">You are here</h2>
  <div class="breadcrumb">
    <a href="">Home</a>
    <span class="sep">»</span>
    <a href="">Λογισμικό</a>
    <span class="sep">»</span>
    Ιστοσελίδες
  </div>
</div>

[dominotrix]

#breadcrumb > div > a:nth-child(3)

 

Σου λεει πως στο #breadcrumb επιλεγει το αμεσως επομενο div (το "αμεσως επομενο" δηλωνεται με το ">") και μετα απο το div, επιλεγει το 3ο παιδι το οποιο ειναι το <a href="">Λογισμικό</a>

 

Αν εβαζες a::nth-of-type(2) τοτε θα διαλεγε το ιδιο ακριβως. Ειναι αυτη η διαφορα του nth-child και του nth-of-type.

 

Με το να γραφεις a:nth-child(2) σημαινει πως θα διαλεξει το a το οποιο ειναι το 2ο element μεσα στο div. Αλλα το 2ο element μεσα στο Div σου δεν ειναι a αλλα ειναι span. Γι αυτο και δεν στο αλλαζει. Αν ομως βαλεις a:nth-child(3) σημαινει πως η εντολη που θα γραψεις θα επηρεασει μεν το a αλλα θα διαλεξει το 3ο child γιατι η εντολη σου ειναι nth-child. Αντιθετα το nth-of-type παει και διαλεγει τον τυπο element που θελεις. Αρα το a::nth-of-type(2) θα διαλεξει το 2ο a που εχεις στο div σου που οντως ειναι το σωστο. Τα λεω λιγο μπερδεμενα ε;;

[tequillaki]

Όχι όχι, κατάλαβα. Στην ουσία εγώ νόμιζα πως το nth-child λειτουργούσε όπως λειτουργεί το nth-of-type (δεν ήξερα καν ότι υπήρχε το nth-of-type). Να σαι καλά για τον χρόνο σου. Κάθε μέρα μαθαίνουμε και κάτι διαφορετικό!

[dominotrix]

Ναι! Μιας και εισαι αρχαριος μπορεις να μπεις να διαβασεις ολες τις εντολες της CSS μιας και ειναι πολυ ευκολες και κατανοητες. Μπορεις να μπεις και στο codepen.io ειναι πολυ καλο online εργαλειο για γρηγορες δημιουργιες και μπορεις να δεις τον κωδικα αλλων για να μαθεις περισσοτερα.

[Zein]

Δηλαδη ειτε ειχε αυτο

 

.q a:nth-child(2)

 

Ειτε αυτο

 

.q span:nth-child(2)

 

,το αποτελεσμα θα ηταν το ιδιο?

[dominotrix]

Οχι γιατι τοτε τα rules που θα ειχε μεσα στα {} θα περνουσανε στο span και οχι στο a.