Zmiany w pojedynczym elemencie klasy

pytanie zadane 14 sierpnia 2015 w HTML i CSS przez Wiktor Stary wyjadacz (11,120 p.)
zamknięte 14 sierpnia 2015 przez Wiktor

Witam. Czy w CSS jest możliwość edycji pojedynczego elementu danej klasy? Chodzi mi o to, że mam sobie klase z kilku elementów, które znajdują się w lini poziomej obok siebie gdzie każdy element ma przypisany: "margin: 20px;", ale chciałbym żeby pierwszy i ostatni element tej klasy miał "margin-left: 0px";. Czy istnieje taka możliwość?

Pozdrawiam.


<div class="windows">
				<ul>
				
					<li>
							<img src="http://d2o0t5hpnwv4c1.cloudfront.net/913_jsDevs/paulirish.png">
						<div class="desc">
							<h3>Paul Irish</h3>
							<p>Web advocate at Google Chrome</p>
						</div>
					</li>
  
  
					<li>
							<img src="http://themebuilder.nl/wp-content/uploads/2012/08/chris_coyier-200x200.png">
						<div class="desc">
							<h3>Chris Coyier</h3>
							<p>Editor at css-tricks</p>
						</div>
					</li>
  
  
					<li>
							<img src="http://qph.is.quoracdn.net/main-thumb-48407-200-rjz4ORJsfr9NDV84i0AzC0oWCt14aL6g.jpeg">
						<div class="desc">
							<h3>Divya Manian</h3>
							<p>Front End Dev at Adobe</p>
						</div>
					</li>
					
					<li>
							<img src="http://qph.is.quoracdn.net/main-thumb-48407-200-rjz4ORJsfr9NDV84i0AzC0oWCt14aL6g.jpeg">
						<div class="desc">
							<h3>Somebody</h3>
							<p>Welcome!</p>
						</div>
					</li>
  
				</ul>
			</div>

komentarz zamknięcia: otrzymanie odpowiedzi

1 odpowiedź

odpowiedź 14 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)
wybrane 14 sierpnia 2015 przez Wiktor

Najlepsza

.mojaklasa:first-child, .mojaklasa:last-child {
margin-left: 0px;
}

Poczytaj o first-child i last-child ;)

komentarz 14 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

Szkoda, że początkujący nie czytają kursów do końca

komentarz 14 sierpnia 2015 przez Wiktor Stary wyjadacz (11,120 p.)

A jeżeli jest:

ul li

komentarz 14 sierpnia 2015 przez Comandeer Guru (601,930 p.)

To nie masz żadnej klasy, ale będzie działać tak samo. A kiedyś była to jedyna możliwość wg. specyfikacji.

komentarz 14 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

li:first-child, li:last-child
{
 margin-left: 0px;
}

komentarz 14 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

No to możesz tak jak napisał Patrycjerz, tylko pamiętaj, że to zadziała na wszystkie li na stronie. Jeśli chcesz to ogarniczyć możesz np. nadać daną klasę dla ul i w CSSie odwołać się po niej:

HTML

<ul class="mojaklasa">
    <li>nie mam lewego marginesu</li>
    <li>mam lewy margines</li>
    <li>nie mam lewego marginesu</li>
</ul>

CSS

ul.mojaklasa > li:first-child, ul.mojaklasa > li:last-child {
    margin-left: 0px;
}

komentarz 14 sierpnia 2015 przez Wiktor Stary wyjadacz (11,120 p.)

Przepraszam, ale źle napisałem, ponieważ chcę uzyskać margin-left: 0px; dla pierwszego elementu i margin-right: 0px; dla ostatniego. Jak to poprawnie zapisać?

komentarz 14 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

No to już powinieneś wywnioskować z tego co Ci podaliśmy....

Idąc dalej moim przykładem:

ul.mojaklasa > li:first-child {
    margin-left: 0px;
}
ul.mojaklasa > li:last-child {
    margin-right: 0px;
}

Albo według tego co Patrycjerz podał:

li:first-child {
 margin-left: 0px;
}
li:last-child {
 margin-right: 0px;
}

komentarz 14 sierpnia 2015 przez Wiktor Stary wyjadacz (11,120 p.)

Oczywiście, że wywnioskowałem i cały czas próbuję, ale dalej działa tylko dla pierwszego elementu.

komentarz 14 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

Może przed tworzeniem stron przeczytałbyś ten kurs?

http://www.kurshtml.edu.pl/css/pseudoklasy.html

komentarz 14 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

To pokaż kod. Powinno przecież wszystko działać.

komentarz 14 sierpnia 2015 przez Wiktor Stary wyjadacz (11,120 p.)

HTML-a wstawiłem wyżej, CSS chyba nie ma potrzeby.

komentarz 14 sierpnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

No właśnie raczej jest potrzeba CSSa bo to w nim przecież coś nie działa. Powinien wystarczyć fragment dotyczący tego.

komentarz 14 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)

Trudno się domyślić, jaki chcesz uzyskać efekt. Nie wiemy też, jakich innych styli używasz w tych elementach.

komentarz 14 sierpnia 2015 przez Wiktor Stary wyjadacz (11,120 p.)

OK, już widzę co jest za to odpowiedzialne. To, że Twój powyższy kod mi nie działa jest winą "float: left;", gdy zmienie go na "float: right;" dla ostatniego elementu to "przylepianie" działa jak powinno, ale teraz jak uporać sobie z tą jedną więszką "przerwą"?

PHOTO: http://imgur.com/62M3bSp