Frage zur Syntax in CSS

[milesdavis]

Hey Leute,
ich habe in D3 folgendes definiert:

var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")..................

Nun habe ich in der CSS-Sektion zum Gestalten des Tooltips folgende Notation:

div.tooltip {   
 .......         
}

Meine Frage:

Warum funktioniert der Spass nicht, wenn ich im CSS-Teil "div." weglasse, quasi so:

tooltip {   
 .......         
}

?

Vielen lieben Dank!
Gruss

 

[tsseh]

Warum funktioniert der Spass nicht, wenn ich im CSS-Teil "div." weglasse, quasi so:

weil du dann das tooltip-elemente auswählst, du aber elemente mit der class tooltip auswählen willst
in deinem 1. fall div-elemente mit class tooltip

 

[milesdavis]

Hey, danke dir!
Dazu hätte ich folgende Frage:
Ich habe ebenfalls Knoten definiert:

var node = svg.selectAll(".node")
              .data(nodes)
            .enter().append("g")
              .attr("class", "node")
              .call(force.drag);

node
  .append("circle")

Diese aber werden im CSS-Teil folgendermassen gestaltet:

.node circle {
  ....

Nun die Frage: "class" ist ja in diesem Fall "node". Und das Element ist das Gruppenelement "g".
Es geht also auch:

g.node {
 ...
}

Gibt es da irgendeinen Grund, warum die erste schreibweise ".node circle" auch funktioniert? Kannst du mir diese Schreibweise vielleicht kurz erläutern?

 

[tsseh]

CSS Selectors Reference

Gibt es da irgendeinen Grund, warum die erste schreibweise ".node circle" auch funktioniert? Kannst du mir diese Schreibweise vielleicht kurz erläutern?

mit dem 1. selektierst du circle-elemente die innerhalb von elementen mit class node sind
mit dem 2. elemente mit class node

da css-eigenschaften an die kinder vererbt werden, kann das auch funktionieren, solange du das nicht überschreibst
https://wiki.selfhtml.org/wiki/CSS/Kaskade
auch wichtig beim überschreiben ist die spezifität
https://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t_der_Regels.C3.A4tze

was du aber mit dem 2. selektor auch erwischschst sind alle anderen elemente von dem element mit klasse node abwärts, also nicht nur die circle-elemente

 

[milesdavis]

CSS Selectors Reference


was du aber mit dem 2. selektor auch erwischschst sind alle anderen elemente von dem element mit klasse node abwärts, also nicht nur die circle-elemente

dürfte ja an sich kein problem sein, wenn ich ausser den circle-elementen keine anderen definiere, oder?

 

[tsseh]

kommt darauf an was du mit der regel definierst, das g-element ist ja auch selektiert