Stylish Tabbed Design

Imagine I have this html and css snippet

h1{
    color: rgb(61, 133, 200);
    font-size: 3em;
    margin-left: 0px !important;
}

h1 ~ *:not(h1) {
    margin-left: 0px;
}

h2{
    font-size: 1.8em;
    margin-left: 40px !important;
}

h2 ~ *:not(h2) {
    margin-left: 40px;
}

h3{
    font-size: 1.4em;
    margin-left: 80px !important;
}

h2 ~ *:not(h2) {
    margin-left: 40px;
}
<h1>Hello First</h1>
<p>This is a paragraph that I wrote that belongs to p</p>
<p>This paragraph should also belong to the first p</p>

  <h2>Tabbed</h2>
  <p>I want this paragraph to be tabbed directly</p>
  <p>This paragrah should be tabbed too<p>

    <h3>Tabbed</h3>
    <p>This should be more tabbed</p>
    <p>This paragrah should be more tabbed too<p>

    
  <h2>More Tabby</h2>
  <p>This should be single tabbed</p>
  <p>How tabby<p>
    
    
<h1>Return of The Title</h1>
<p> This should no longer be tabbed </p>
<p> Nor should this <p>

I am struggling to apply the specified CSS style without using !important tags. How can I achieve consistent margins for all elements below a specific heading?

If you have any suggestions on how to tackle this issue, please share them!

htmlcsslayout

Answer №1

Utilize the :active selector to customize and style the active link. A link is considered active when it has been clicked.

Below is an example showcasing the use of the background-color property:

h1{
    color: rgb(61, 133, 200);
    font-size: 3em;
    margin-left: 0px !important;
}

h1 ~ *:not(h1) {
    margin-left: 0px;
}

h2{
    font-size: 1.8em;
    margin-left: 40px !important;
}

h2 ~ *:not(h2) {
    margin-left: 40px;
}

h3{
    font-size: 1.4em;
    margin-left: 80px !important;
}

h2 ~ *:not(h2) {
    margin-left: 40px;
}
p:active {
    background-color: yellow;
}
h3:active {
  background-color: red;
  }
h1:active {
  background-color: red;
  }
h2:active {
  background-color: red;
  }
<h1>Hello First</h1>
<p>This is a paragraph that I wrote that belongs to p</p>
<p>This paragraph should also belong to the first p</p>

  <h2>Tabbed</h2>
  <p>I want this paragraph to be tabbed directly</p>
  <p>This paragrah should be tabbed too<p>

    <h3>Tabbed</h3>
    <p>This should be more tabbed</p>
    <p>This paragrah should be more tabbed too<p>

    
  <h2>More Tabby</h2>
  <p>This should be single tabbed</p>
  <p>How tabby<p>
    
    
<h1>Return of The Title</h1>
<p> This should no longer be tabbed </p>
<p> Nor should this <p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble sending an array from Flask to a JavaScript function

As a newcomer to web development and JavaScript, I'm struggling to pass an array from a Flask function into a JavaScript function. Here's what my JS function looks like: function up(deptcity) { console.log('hi'); $.aja ...

javascriptpythonhtmlajaxflask

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

I have encountered an unusual behavior when trying to animate the hamburger button using Bootstrap 5. Previously, with Bootstrap 4, everything worked smoothly. However, in Bootstrap 5, I noticed that the icon initially displays as 'X' and then sw ...

cssbootstrap-4css-animationsbootstrap-5

Instructions for inserting a hyperlink into a column of a table with the *ngFor directive in Angular2

I currently have a table with 4 columns: Name, ID, Department, and City. I am fetching both the row data and column data as an array from a TypeScript file and iterating through them using *ngFor. Below is a snippet of my code: <tbody> <tr *ng ...

htmlangularhyperlink

A single feature designed to handle various elements

I currently have this HTML code repeated multiple times on my webpage: <form class="new_comment"> <input accept="image/png,image/gif,image/jpeg" id="file" class="file_comment" key=comment_id type="file" name="comment[media]"> <spa ...

javascriptjqueryhtml

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...

javascripthtmlangulartypescript

When examining two arrays for similarities

I am dealing with two arrays within my component arr1 = ["one", "two"] arr2 = ["one", "two"] Within my HTML, I am utilizing ngIf in the following manner *ngIf="!isEnabled && arr1 != arr2" The isEnabled condition functions as expected, however ...

htmlangulartypescript

Issues with external javascript link functionality

I'm having trouble connecting my external JavaScript file to my HTML code. I'm attempting to concatenate two strings using an input function and then display the new string in the empty text field. What could be causing this issue? Appreciate an ...

javascripthtmlhyperlinkexternal

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

htmlcss

Incorrect Calculation of CSS Grid Container Width in Firefox

When using this CSS Grid code, there is a difference in behavior between Chrome and IE compared to Firefox. https://codepen.io/inkOrange/pen/XGzeMo This layout is intended to scroll horizontally when the content overflows beyond the fixed container size o ...

htmlcssfirefoxcss-grid

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

htmlcss

Is there a way in Ruby to extract the inner HTML of the <title> tag by loading the HTML source code of a webpage into a string and then parsing it?

Currently, I am trying to extract the inner HTML of the <body> tag from an HTML source string using Ruby. Does anyone know how this can be achieved? Despite my attempts to find a solution, I have been unsuccessful so far. Any guidance would be grea ...

htmlruby

Formatting HTML Output Using PHP

Looking to format html output sourced from a database using php and facing an issue: Desired Format: ... <li> <div class="row-wrapper"> <div class="some-class-1">ARRAY-ELEMENT-1</div> <div class="some-class-1" ...

phphtmlarrays

Attempting to implement a basic AngularJS integration with Google Maps for a straightforward demonstration

I have a basic Google Maps project that I am trying to transition into an AngularJS project. This is all new to me as I am a beginner in both AngularJS and web development so please bear with me :) The project can be found at https://github.com/eroth/angul ...

javascripthtmlgoogle-mapsangularjsweb-applications

Arrange floating elements in a three-column layout

Can anyone help me with a CSS solution to make boxes with different heights stack underneath each other neatly, similar to Tetris? Here's my code: CSS #page .equipeBox{ float:left; width:280px; padding:10px; margin:10px; backgro ...

htmlcsscss-float

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

javascripthtmljquerysqliteweb-sql

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

I have been tackling a unique challenge with my custom CMS in Drupal for a couple of weeks now. I am facing an issue where I need to dynamically load a URL by extracting the node ID from the target Drupal page and appending it to the base URL of the websit ...

htmliframejquery

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

jqueryhtmlangularjstwitter-bootstrapangular

Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling: .condition-table { background-color: #e1f5fe70; } The styling seems to work fine so far. However, when I added this additional CSS: .co ...

cssvue.jsvuejs2vue-componentvuetify.js

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

javascripthtmljsonapi