Forum Mjukvara Programmering och digitalt skapande Tråd

CSS, begränsa styling till element inom ett element?

1
Skriv svar
Permalänk
Medlem ★
●

CSS, begränsa styling till element inom ett element?

Hejsan!

Ja jag har helt hjärnsläpp nu men ja, att välja p, strong, input osv som child till en div är riktigt enket, tex #hero>strong osv!

Men iaf, säg att jag har en div i en div, hur väljar jag så den stylas ENBART av om den ligger i en viss div?

Tex jag vill bara ha denna stylingen: .hero-ctr .primary { padding: 30px 0 0 0; }

Men eftersom .primary inte refererar till någon parent så kommer .primary i exemplet även reagera om jag vill använda .primary som en global div på min sida: .primary { width: 600px; height: auto; float: left: }

Så hur väljer jag ut en div i en div i CSS?

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag missförstår dig säkert, men det är meningen att du ska kunna förändra alla element med samma klass eller id utan att behöva peka på var den ligger i strukturen.

.div1 .div2 {width:30px; height:30px; background-color:#F00;}
.div2 {border:10px solid #000;}

Div2 kommer att påverkas av dem båda. Däremot kommer den inte påverkas om du skriver ".div3 .div2". Har den tidigare diven inte något namn (eller om det inte går att veta) använder du bara "div.div2".

Så de är alltså beroende av sökvägen in om du vill bestämma utseendet till just en typ av div.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Mmm precis, det är just det jag inte vill, jag vill att .div1 .div2 skall vara helt oberoende av .div2

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

lägg den efter då.

.bar {color:red} /* alla bars är röda.. */
.foo .bar {color:blue} /* ... förutom de som ligger någonstans under foos! */

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ja men då måste jag ändå overrida värdena jag anger i .bar när man gör .foo .bar

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av JesperA
Ja men då måste jag ändå overrida värdena jag anger i .bar när man gör .foo .bar

Då förstår jag inte riktigt vad du menar.. om man tar ditt första exempel, .ctr-hero .primary { ... } så påverkar detta enbart .primary som ligger under .ctr-hero. Div:ar med .primary som ligger utanför får inte den stylingen som anges ovan, utan defaultar till webbläsarens standardintställningar.

edit: du kan naturligtvis även göra .ctr-hero>.primary { ... } för att targeta .primarys som bara ligger en nivå under .ctr-hero, men det fungerar inte i IE6 eller lägre.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Skapar jag en .primary {} sen så kommer den ändå påverka .ctr-hero>.primary {}

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Givetvis; såvida du inte skapar den som en underklass till ett id eller en annan klass så kommer den att vara global. Samma sak gäller om du stylar p- eller strong-element också.

<style>
	.testdiv>strong {text-decoration:underline;}
	strong {color:red;}
</style>

<div class="testdiv">
	<strong>Hello World!</strong>
</div>

Ovanstående kod visar Hello World! i röd och understruken text.

Vad du KAN göra (och som naturligtvis inte fungerar i IE6-) är att använda länkade klasser.

.foo.bar {color:red;}
.foo {color:green;}
.bar {color:blue;}

<div class="foo bar">Länkade klasser</div>
<div class="foo">Bara foo</div>
<div class="bar">Bara bar</div>
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jao är det inte sjukt att det inte verkar finnas någon CSS för att ignorera det globala värdet?

Vill man ha en .primary som alltid betyder samma sak över hela sidan (lätt för utomstående att ändra CSS:en) så måste jag baka in det i en annan div, en div som troligen inte kommer ha någon annan funktion än att agera som brytare av något som är globalt...

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag har en känsla av att jag missförstår jag dig totalt..

Om du sätter .primary {text-decoration:underline} så kommer varje .primary på sidan att bli understruken. Det behöver man inte baka in den i nån div för att åstadkomma.

I ditt första stycke låter det som om du vill att .wrap .primary { ... } ska ignorera de definitioner som redan satts i .primary { ... } men vad är då meningen med att använda samma klassnamn?

En vild gissning är förresten att du kanske vill styla body>.primary { ... }. På det viset skapar du inte en global klass men som sagt, det fungerar inte i IE6 (som jag fortfarande måste klamra mig fast vid, men jag hör nog till ett fåtal)

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du tänker fel någonstans om du måste göra så här. En klass är till för en samlad mängd element som har något gemensamt, om du vill ha helt olika stil beroende på var den ligger (dvs. att .primary inte har någon gemensamt med .ctr-hero .primary) så ska dessa element nog inte ha samma klass.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Varför skapar du inte bara en ny klass?

Visa signatur

/Mvh Stefan

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Citat:

Ursprungligen inskrivet av Teknocide
I ditt första stycke låter det som om du vill att .wrap .primary { ... } ska ignorera de definitioner som redan satts i .primary { ... } men vad är då meningen med att använda samma klassnamn

Exakt!

Citat:

Ursprungligen inskrivet av You
Du tänker fel någonstans om du måste göra så här. En klass är till för en samlad mängd element som har något gemensamt, om du vill ha helt olika stil beroende på var den ligger (dvs. att .primary inte har någon gemensamt med .ctr-hero .primary) så ska dessa element nog inte ha samma klass.

Citat:

Ursprungligen inskrivet av Guru Meditation
Varför skapar du inte bara en ny klass?

Grejen är att dom har samma funktion så för att inte förvirra användarna, tex i Wordpress så använder man tex <?php the_content(); ?> för att visa ja vad den visar är väl ganska självklart, då är det smidigt att även ha en class som heter the_content! Dessa kan ha olika utseende beroende på vad den ska visa och vart någonstans!

Jaa det är enkelt att döpa om klasserna så dom är unika MEN som sagt förenklar det för användarna att snabbt förstå vad classen är till för!

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag vet inte om det förenklar i ditt fall att divar använder flera klasser istället?

<div class="foo bar">Jag har klasserna .foo och .bar</div>

Jag förstår vad du vill göra men jag tror det helt enkelt bryter mot hur CSS är strukturerat.

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●

Håller med save, det är nog multipla klasser du vill ha.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara