Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

Witam,
jak zmieniać tło w <td> gdy zawiera <div>, gdzie class zawiera "moje Wydarzenie1"?

<table>

   <tr>

       <td>

           <div id= "pierwszy"> td1; div pierwszy</div>

        </td>

       <td>

           <div id= "pierwszy"> td2; div pierwszy</div>

           <div id= "dwa" class= "mojeWydarzenie1  obecnyMiesiac"> td2; div dwa</div>

       </td>

   </tr>   

</table>

Poniżej CSS, ale jest tylko tło na div2:

table, tr, td {

   border: 1px solid black;

}



td div[class*="mojeWydarzenie1"]{

     background-color: #e5d0ff;

}

EDIT
http://jsfiddle.net/BNyb9/13/

PozdrawiamTen post został edytowany przez Autora dnia 17.10.15 o godzinie 20:00

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

A tak naprawdę, to o co chodzi? ;)

Co chcesz zmieniać?

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

Mam kalendarz w którym wpisuję wydarzenia. Wydarzeniom nadaję kategorię. Dla czytelności chcę by wydarzenie danej kategorii miało określony kolor.
Wydarzenie danej kategorii rozpoznaję po <div> z kategorią (<td> może też zawierać <a href/>).

P.S.Może ktoś zasugeruje JavaScript ... mam dostęp do CSS.

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

<table>

   <tr>

       <td>

           <div id= "pierwszy" class= "mojeWydarzenie2"> td1; div pierwszy</div>

        </td>

       <td>

           <div id= "pierwszy" class= "mojeWydarzenie3"> td2; div pierwszy</div>

           <div id= "dwa" class= "mojeWydarzenie1"> td2; div dwa</div>

       </td>

   </tr> 

    

</table>

table, tr, td {

   border: 1px solid black;

}



#pierwszy.mojeWydarzenie2 {background-color: #05deff;}

#pierwszy.mojeWydarzenie3 {background-color: #e0defa;}

#dwa.mojeWydarzenie1 {background-color: #e5d0ff;}

Czy o coś takiego chodziło?
Rozróżniasz styl identyfikatora stylem klasy w nim zawartym.

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

Wcześniej bardzo uprościłam przykład - id w drugim div (z informacją o kategorii wydarzenia) jest generowane dynamicznie:

<table>

   <tr>

       <td>

           <div id= "nrDnia-20">20</div>

        </td>

       <td>

           <div id= "nrDnia-21">21</div>

           <div id= "wydarzenie-720-21" class= "biezacyMiesiac kat_spotkanie-biz mojeWydarzenie3"> Spotkanie biz. z fimą X 

                    <a href= "www.firmaX.pl">www.firmaX.pl</a>

            </div>

       </td>

        <td>

           <div id= "nrDnia-22">22</div>

       </td>

        <td>

           <div id= "nrDnia-23">23</div>

           <div id= "wydarzenie-738-23" class= "biezacyMiesiac kat_spotkanie-prv mojeWydarzenie4"> Spotkanie prywatne</div>

       </td>

   </tr> 

</table>

Jeden znacznik <td> zawiera informacje o jednym dniu w miesiącu. Jak nie ma wydarzenie to jest tylko jeden <div> z nr dnia. Jeśli wydarzenie jest to drugi <div> zawiera informacje o wydarzeniu, także kategorię do jakiej jest przypisane.

Poniżej CSS, gdzie kolorowany jest tylko tekst w drugim <div>:

table, tr, td {

   border: 1px solid black;

}



td {

    height: 80px;

}



td div[class*="kat_spotkanie-biz"]{

     background-color: #e5d0ff;

}



td div[class*="kat_spotkanie-prv"]{

     background-color: #e0defa;

}

EDIT:
http://jsfiddle.net/BNyb9/33/

Zależy mi na tym by pokolorować nie tylko zawartość w drugim <div>, ale także poniżej niego (dzień miesiąca, czyli pierwszy <div> nie musi być w tym przypadku kolorowany). Obecnie w zależności od tego jakiej długości jest tekst z informacją o wydarzeniu taka część jest kolorowana (a poniżej pozostaje białe tło). Wydaje mi się, że można to uzyskać przez pokolorowanie w pierwszej kolejności całego <td>, a potem ewentualnie zmienić tło na pierwszym <div>.Ten post został edytowany przez Autora dnia 18.10.15 o godzinie 14:49

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

1. Czy w danym dniu mozesz miec kilka wydarzen roznego rodzaju? Jesli tak - kolorowanie calego <td>nie ma sensu
2. Czy wysokosc <td> musi byc stala? Nie: usun height z <td> Tak: Zyj z tym tak jak jest.
3. Jesli chcesz pokolorowc TD: czy nie mozesz dodac sobie klasy odpowiedniego typu wydarzenia do <td>?
4. Jaki sens maja klasy mojeWydarzenie3, mojeWydarzenie4? Do identyfikacji przez js?

Moja rada: zakladajac, ze to ma byc kalendarz (i bedzie tam wiecej niz jedno wydazenie/dzien) daj sobie spokoj z kolorowaniem <td>, raczej zrob z wydarzenia "plakietke" - ramka, zaokraglone brzegi, delikatny cien. Potem jeszcze obsluga drag & drop i bedzie pieknie ;-)

Tak na szybko:
http://jsfiddle.net/Lkerv953/1/

Temat: Jak zmienić kolor tła <td> gdy zawiera określony...

Panowie dziękuję za odzew.

1. W danym dniu może być kilka wydarzeń różnej kategorii ... no tak nie ma sensu, chyba, że znajdę mocniejszy argument, który będzie jednak przemawiał za jednym tłem w tym przypadku.
Na chwilę obecną skorzystam z rady ;)
2. Wysokość musi być stała .
3. Ostatecznie można dodać klasę do <td> (obecnie mam tylko dostęp do CSS), ale pewnie spróbowałabym wcześniej zrobić to w JS.
4. Klasy mojeWydarzenie3, mojeWydarzenie4 są ot tak ... obecnie nie mają żadnego zastosowania, dodałam je tylko do przykładu. W rzeczywistości w tym <div> mam zdefiniowanych wiele innych klas.