Stylowanie w css

Question

Witajcie, mam pewien problem w stylizowaniu strony przy użyciu CSS. 

Mam kod w html(od razu zaznaczam, że nie powinien on być zmieniany) i muszę go wystylizować. tak aby dwa pierwsze akapity były obok siebie(co już zrobiłem) oraz żeby pierwsza litera z pierwszego akapitu zaczynała się od litery koloru czerwonego.

Więc pierwsze spróbowałem z pseudoelementami i zadziałało tylko, że w każdym akapicie więc na moją logikę chciałem użyć pseudoklasy :first-child {}. Tylko tu pojawia się problem bo nie działa. Więc mam pytanie czy można zagnieździć pseudoelement w pseudoklasie? lub zrobić to inaczej ?

Tu jest część z html:

<div class="row">
        <div class="column">
            
                <h1>Firs div in document!</h1>
            
                <p>Lorem ipsum dolor sit amet enim[...]
                </p>
        </div>
        <div class="column">
            
                <h1>Second div in document!</h1>
           
                
                <p>Lorem ipsum dolor sit amet enim.[....]
    </div>

a tu to co na razie zrobiłem w CSS:

.row {
    display: block;

}
.column{

	
	width: 750px;
	height: 500px;
	margin: 10px;
	display: inline-block;

}

h1{
	background-color: black;
	height: 70px;
	color: white;
}
p:frist-child{
	
}

 

Answer 1

Ustawić elementy obok siebie możesz np. za pomocą flexboxa. Daj dla .row - display: flex. Co do pierwszej litery - https://developer.mozilla.org/pl/docs/Web/CSS/:first-letter

Comments

Co do pierwszej litery to zrobiłem tak wcześniej, tylko mi chodzi o to żeby ona pojawiła sie tylko w pierwszym akapicie Fris div document! a nie w obydwu, a oba paragrafy korzystają z znacznika <p>

---

http://codepen.io/anon/pen/ZBXKBm

---

Dziękuje Ci bardzo, właśnie tutaj miałem problem w zagnieżdżeniu tego ojciec-syn