I am trying to change the color of all even titles from h2 to orange using nth-child. However, I seem to have made a mistake somewhere and can't figure out what it is...
*{
font-size: 1em;
}
h2{
font-size: 1.5em
}
h2:first-letter{font-size: 150%}
h2:nth-child(odd){
color:#ef3909;
}
The issue lies in the last line of the CSS code with the nth-child selector not working as expected. Any help would be greatly appreciated. Thank you.
In order to style all even <h2> elements, use the nth-child(even) selector.
.main article:nth-child(even) h2 {
color: orange;
}<div class="main">
<article>
<a id="welkom"><h2>Welkom</h2></a>
<p>
Dakwerken Jellen is al jaren de <strong>specialist in dakwerken</strong>.
</p>
</article>
<article>
<a id="platteDaken"><h2>Platte daken</h2></a>
</article>
<article>
<a id="gevelbekleding"><h2>Gevelbekleding</h2></a>
<p>
We also specialize in wall cladding alongside roof coverings.
</p>
</article>
<article>
<a id="zinkwerken"><h2>Zinc works</h2></a>
<p>
Zinc has been a preferred material for rainwater drainage through gutters for many years.
</p>
</article>
<article>
<a id="referenties"><h2>References</h2></a>
<p>
Some references...
</p>
</article>
</div>
</div>For beginners, the `nth-child()` selector can be a bit tricky to understand at first.
Below is an example of how it can be used in CSS:
.container section:nth-child(3n) p{
font-size: 16px;
}
I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...
Recently, I've been contemplating how to style my app. One common approach is using CSS, but the question that lingers in my mind is whether it's truly compatible and if I should begin utilizing CSS. Is there perhaps a different language that wou ...
I need help with styling a div that will contain a large amount of text on my webpage. I want to use the overflow-y property for scroll, but the issue arises when trying to style the scroll bar with a radius. Check out this jsfiddle link for reference: ht ...
Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...
I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...
Is there a way to remove the brief black background that appears when loading an HTML5 video? I have tried using CSS without success. The HTML: <div id="start-screen"> <video id="video-element"> <source src="video-mp4.mp4" type="vide ...
I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...
I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...
Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...
When I switch to a responsive website, the background turns red at a width of "285px" even though I have set the max width to "1140px". If I use min-width, the effect doesn't show up until 256/276px. I've tried both max and min width settings, bu ...
I am very new to HTML and CSS3. I am teaching myself as I work on creating a new website. For some reason, my image gallery is not displaying properly in Opera browser. The width of portrait images appears distorted only in Opera, whereas landscape images ...
Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...
I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...
When creating a DOM element, I am following this process: var imgEle = document.createElement('img'); imgEle.src = imgURL; x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...
In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...
I've been searching for a solution to this issue without any luck. Below is the code I have: jQuery("#categories_parent_id").change(function() { id = jQuery("#categories_parent_id").val(); jQuery.ajax({ type: ...
The CSS design does not display correctly on iPhone devices in real-life testing, even though it appears fine on browsers with mobile view emulators. Interestingly, the design also looks great on Android phones but encounters issues specifically on iPhones ...
Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...
Experiencing some unexpected behavior with iOS mobile safari on version 13.3. I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While ever ...
In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...