Tips for linking to a file located one directory higher than the current one

When working with CSS, I understand that I can link to another file using various methods such as: photo.jpg or ./photo.jpg for a file in the same directory, and photo-folder/images/photo.jpg or ./photo-folder/images/photo.jpg to reference a file located below or inside the parent directory.

The same concept applies to HTML with syntax like ./[href] or [href].

However, what if I need to link to a photo in a directory that is the direct or indirect parent of my current file? How can I do this without using the full drive address like 

C:/Users/Username/Code/etc/photo.jpg
, when my working file is located at 
C:/Users/Username/Code/etc/code/file.css
...

I'm curious about how this linking process works in languages such as HTML, CSS, JS, Python (feel free to include other languages too)! :D

As a side question: Is there a technical distinction between ./file and file, and is it recommended to use one format over the other for reasons like preventing issues, improving readability, etc.? Personally, I haven't encountered any problems using either method, or even mixing them within the same project...

javascripthtmlcss

Answer №1

To navigate to the parent directory, use ../. This signifies moving up one level in the directory structure. If you need to go multiple levels back, you can use: ../../../ (for 3 levels)

Using ./ for the current directory is unnecessary and redundant.

This concept generally applies to all programming languages. However, in HTML/CSS, there is an additional relative path option to access the root of the domain which is: / (no dots). For instance, if you are at 

https://example/some/long/path/file.html
and want to access a file at http://example/file.jpg, you can simply use the relative path: /file.jpg

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

React.renderComponent does not exist as a valid function

After reading several articles on ReactJs for beginners, I came across a tutorial that only provided code snippets. While attempting to work on my first component, I encountered some difficulties: Here is the full code: <!DOCTYPE html> <html lan ...

javascriptnode.jsreactjsbabeljsreact-dom

Simple Ways to Access Child Elements Within an HTML Element

Within my JS custom object, I have a variable saved. The code snippet below shows the implementation inside the class: var toolbar; this.create_toolbar = function() { self.toolbar = document.createElement('div'); $(self.toolbar) ...

javascriptjquery

messages delayed using google cloud pub sub

Currently, I am in the process of developing an eCommerce platform that includes a bidding feature for offers. Each offer can consist of multiple rounds, each with its own start date and end date. Once a round is completed, I need to perform various tasks ...

javascriptnode.jsgoogle-cloud-pubsubgoogle-api-nodejs-clientevent-driven

The use of a custom padding on a text input with the Bootstrap 3 form-control class can cause the text to be hidden

It seems like the code is working fine in Opera and Chrome, but in Firefox and IE11, the text is getting hidden, which is not very enjoyable. I don't have a Mac, so I can't test it on Safari. You can see the issue in action on this Plunker. I&a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Encountering a ReferenceError while trying to include the ng2-bootstrap script

I'm in the process of integrating ng2-bootstrap into my project. I have attempted adding the script and including the cdn, but I keep encountering the following error: ng2-bootstrap.js:1 Uncaught ReferenceError: System is not defined ng2-bootstrap.js ...

javascriptangularjsangularng2-bootstrap

How can I populate an array to use in a datatable when rendering?

How can I ensure that my datatable renders with the proper data on my webpage without needing to interact with the sort button? Where should I populate the array for use in a datatable so that it occurs before the rendering? export function MyComponent() ...

javascriptreactjsasync-awaitnext.js

An effective method for utilizing a multiple choice input (presented as buttons) for entering data into a database using html, css, and js

I'm trying to figure out the coding process using buttons and input It's giving me a result, but only allows for a single choice Although I have limited experience with this, my goal is to create a multiple choice selection for days of the week ...

javascripthtmlcssdatabaseinput

Tips for transferring data between iframes on separate pages

I am currently working on implementing a web calendar module within an iframe on page-b. This module consists of 1 page with two sections. Upon entering zipcodes and house numbers, the inputs are hidden and the calendar is displayed. The technology used he ...

javascriptasp.netajaxpostiframe

What is the method for toggling a checkbox on and off repeatedly?

I've been struggling with this piece of code. I've attempted using setTimeout, promises, and callback functions, but nothing seems to work as expected. document.querySelectorAll("input").forEach((el, i) => { setTimeout(() => { ...

javascript

The alert box has disappeared and does not display, even after the return false statement

Review the following code snippet: area.onkeydown = function(e){ e = e || window.event; if(e.shiftKey && e.keyCode === 32){ e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); // no aler ...

javascripthtmlstoppropagation

Meteor Js Boostrap Menu Formatting Challenges

Greetings and good afternoon. I am currently working on developing a social networking application using the Meteor Js Stack, but I am encountering some issues with my navigation bar wrapping on mobile devices. Despite setting my dropdown to pull-right, it ...

htmlcsstwitter-bootstrapmeteortwitter-bootstrap-3

How to Utilize ScriptManager Without Any Additional JavaScript Files?

After creating a new ASP 4.0 WebSite in VS2010 and inspecting it with IE9 Developer Tools, I noticed that only one JavaScript file is hidden behind WebResource.axd. It was no surprise to me, but when I decided to include a ScriptManger into my WebSite, thr ...

javascriptasp.netscriptmanager

Selenium reports a selected element as Null

I am seeking to implement a dynamic waiting time for crawling data. Below is the HTML structure: <tr class="mv-quote-row" style="border-top-width: 1px;"> <td style="text-align: left;">Week 34/21</td> <t ...

htmlpython-3.xselenium

The click event listener declared with v-on inside a Vue Component fails to trigger

I am currently working on a Vue instance for a sidebar within my application that displays a list of menu items. In order to achieve this, I have created a local component with the following template structure: template:'<div><li class="cust ...

javascriptvue.jsvue-component

What could be the reason for my electron application consistently displaying false results when using Google Authenticator, despite entering the correct token?

Within this snippet of code, I am initiating a request to the main process to create a QR code using speakeasy and qrcode. document.addEventListener('DOMContentLoaded', async function() { const data = await ipcRenderer.invoke('generate-q ...

javascriptnode.jselectron

Features of ES2015's [[class]] attribute

I've been developing a basic clone function var shallowCopy = function (value) { // In ES2017, we could also use // return Object.create(Object.getPrototypeOf(value), Object.getOwnPropertyDescriptors(value)); let propDescriptors = {}; for (le ...

javascriptecmascript-6

Steps for loading a different local JavaScript file by clicking on a button

My goal is to reload the browser page and display a different ReactJS component/file when a button is pressed. Initially, I attempted using href="./code.js" or window.location="./code.js" within the button props, but unfortunately, it did not yield the des ...

javascriptreactjs

I am looking to modify the file name in the save as dialog box whenever the user performs a right-click

In my current project, I am utilizing PHP along with javascript/jQuery. I have a specific requirement where I need to alter the filename displayed in the save as dialog when a user right-clicks on an image and chooses to save it. For instance, I wish to ...

phpjavascriptjquerysave-as

Is there a way to display the specific information of a flatlist item in a pop-up window?

Welcome to the HomesScreen.js! This section handles rendering the flat list elements. import { StatusBar } from 'expo-status-bar'; import { Button, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { ...

javascriptreactjsreact-nativereact-native-flatlist

What is the reason that em takes precedence over p for font-family?

Take a look at this CSS snippet: * { font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif} p { font-family: Courier; } Now let's consider this HTML markup: <p>Hi there. So <em>very</em> pleased to make your acquaintance. ...

htmlcssfont-family