Is it possible for an id to act as a parent in CSS? For instance:
<div id="link">
<a href="www.example.com"></a>
</div>
The CSS code:
#link > a{
/* style would be applied here*/
}
Can this actually be achieved?
Is it possible for an id to act as a parent in CSS? For instance:
<div id="link">
<a href="www.example.com"></a>
</div>
The CSS code:
#link > a{
/* style would be applied here*/
}
Can this actually be achieved?
It seems like there is an error in your HTML code. The opening a tag appears to be a closing tag, and the a element doesn't have any content to click on.
To fix this issue, you can utilize the "child" operator with any valid selector: parent > child.
No matter what type of selector parent and child are (element, id, class, etc.), as long as they are valid, the operation will work.
#parent {
height:100px;
background-color:rgba(0,0,255,.2);
padding:20px;
}
/* This will select all <a> elements that are children of #parent */
#parent > a {
background-color:yellow;
box-shadow:2px 2px 2px rgba(75,75,0,.8);
padding:5px;
margin:2px;
border-radius:20px;
text-decoration:none;
display:inline-block;
}
/* This will affect any <a> that is being interactied with */
#parent > a:active {
background-color:yellow;
box-shadow:-2px -2px 2px rgba(100,100,100,.5);
}<div id="parent">
<a href="http://www.example.com">Click me</a>
<a href="http://www.example.com">Click me</a>
<a href="http://www.example.com">Click me</a>
<a href="http://www.example.com">Click me</a>
</div>Absolutely, it can be done.
#link >a{
color:blue;
}
#link> a{
color:blue;
}<div id="link"><a href="www.website.com">CLICK HERE</a></div> <html>
<head>
<style>
body {
width: 500px;
height: 500px;
border: 2px solid rgb(0, 0, 0);
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: system-ui;
user-select: none;
}
#game {
position: absolute;
bottom: 0;
width: 70%;
min-height: 150px;
min-width: 300px;
padding: 20px;
padding-top: 20px;
background-color: rgba(207, 138, 70);
display: flex;
flex-direction: column;
align-items: center;
}
#game-end {
position: absolute;
width: 250px;
height: 150px;
display: flex;
justify-content: space-around;
flex-direction: column;
background-color: rgba(207, 138, 70, 0.99);
padding: 40px;
border-radius: 10px;
align-items: center;
}
.end-text {
font-size: 17px;
}
.no-display {
visibility: hidden;
pointer-events: none;
}
.hidden {
color: transparent;
}
.secret-character {
margin: 3px;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
background-color: white;
}
.secret-character-border {
border: 2px solid white;
}
.character {
margin-right: 10px;
}
.game-inactive {
opacity: 0.1;
}
#guessed-characters {
display: flex;
flex-wrap: wrap;
min-height: 25px;
}
#secret-word {
display: flex;
flex-wrap: wrap;
}
#remaining-guesses-container {
display: flex;
top: 10px;
position: absolute;
left: 10px;
font-size: 15px;
}
#remaining-guesses {
margin-left: 10px;
}
button {
border-radius: 10px;
padding: 5px;
font-size: 20px;
background-color: brown;
color:white;
}
button:hover {
cursor: pointer;
}
#game-message {
margin-top: 20px;
border: 2px white solid;
padding: 10px;
min-height: 18px;
width: 80%;
}
#person {
font-size: 25px;
height: 186px;
position: relative;
}
#torso, #lower {
display: flex;
}
#head {
font-size: 40;
position: absolute;
top: 0;
}
#torso {
font-size: 35px;
top: 30px;
position: absolute;
left: -1px;
}
#arm-left {
margin-top: 2px;
margin-right: -5;
}
#arm-right {
margin-left: -5;
margin-top: 2px;
}
#lower {
font-size: 35px;
top: 60px;
position: absolute;
right: -24px;
}
.intact {
visibility: hidden;
}
#pole {
border-right: 7px solid brown;
border-top: 7px solid brown;
width: 80px;
height: 138px;
position: absolute;
right: 178px;
top: 137px;
}
#rope {
position: absolute;
top: 129px;
right: 233px;
font-size: 40px;
}
#game-unstarted {
display: flex;
position: absolute;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 35px;
border: 3px solid black;
background-color: orangered;
}
#game-started {
position: relative;
align-items: center;
width: 500;
height: 500;
}
#singleplayer, #multiplayer {
padding: 5px;
margin: 25px;
}
</style>
</head>
<body>
<div id="game-unstarted">
<button id="singleplayer">
One-player
</button>
<button id="multiplayer">
Two-player
</button>
</div>
<div id="game-started" class="no-display">
<div id="props">
<div>
<div id="rope">
|
</div>
<div id="pole">
</div>
</div>
<div id="person"> <!--these are the body parts for the person-->
<div id="head" class="appendage intact">
o
</div>
<div id="torso">
<div id="arm-left" class="appendage intact">
/
</div>
<div id="body" class="appendage intact">
|
</div>
<div id="arm-right" class="appendage intact">
\
</div>
</div>
<div id="lower">
<div id="leg-left" class="appendage intact">
/
</div>
<div id="leg-right" class="appendage intact">
\
</div>
</div>
</div>
</div>
<div id="game">
<div id="guessed-characters">
</div>
<div id="secret-word">
</div>
<div id="game-message">
</div>
</div>
<div id="game-end" class="no-display">
<div id="game-end-message" class="end-text">
</div>
<div id="revealed-secret" class="end-text">
</div>
<button id="restart-game" class="end-text">
Play again
</button>
</div>
</div>
</body>
<script>
function includes(char, string) {
for (var i = 0; i < string.length; i++) {
var currentStrChar = string[i];
if (char === currentStrChar) {
return true;
}
}
return false;
};
function createDivWithText(text) {
var div = document.createElement("div");
div.innerHTML = text;
return div;
};
function getRandomEntry(array) {
var randomIdx = Math.floor(Math.random() * array.length);
return array[randomIdx];
};
function Hangman(secretWord) {
this.originalGameState = document.body.innerHTML;
this.secretWord = secretWord;
this.charactersGuessed = '';
this.remainingBadGuesses = 6;
};
Hangman.prototype.initializeSecretWord = function() {
var container = document.getElementById('secret-word');
for (var i = 0; i < this.secretWord.length; i++) {
var secretChar = this.secretWord[i];
var div = createDivWithText(secretChar);
div.classList.add('secret-character', 'hidden');
container.append(div);
}
};
Hangman.prototype.revealBodyPart = function() {
this.remainingBadGuesses -= 1;
function reveal(id) {
var container = document.getElementById(id);
container.classList.remove("intact");
}
if (this.remainingBadGuesses === 5) {
reveal("head");
}
else if (this.remainingBadGuesses === 4) {
reveal("body");
}
else if (this.remainingBadGuesses === 3) {
reveal("arm-left");
}
else if (this.remainingBadGuesses === 2) {
reveal("arm-right");
}
else if (this.remainingBadGuesses === 1) {
reveal("leg-left");
}
};
Hangman.prototype.playerLost = function() {
return this.remainingBadGuesses === 0;
};
Hangman.prototype.showGameEnd = function() {
var gameContainer = document.getElementById('game');
gameContainer.classList.add('game-inactive');
var hangmanContainer = document.getElementById('props');
hangmanContainer.classList.add('game-inactive');
var gameEndContainer = document.getElementById('game-end');
gameEndContainer.classList.remove('no-display');
var messageContainer = document.getElementById('game-end-message');
if (this.playerLost()) {
messageContainer.innerHTML = "You Lose!";
}
else {
messageContainer.innerHTML = "You Win!";
}
var secretContainer = document.getElementById('revealed-secret');
secretContainer.innerHTML = 'The secret was: ' + this.secretWord;
};
Hangman.prototype.playerWon = function() {
for (var i = 0; i < this.secretWord.length; i++) {
var secretChar = this.secretWord[i];
if (!includes(secretChar, this.charactersGuessed)) {
return false;
}
}
return true
};
Hangman.prototype.addToCharactersGuessed = function(char) {
this.charactersGuessed += char;
};
Hangman.prototype.appendGuessedCharacter = function(key) {
var guessedCharDiv = createDivWithText(key);
guessedCharDiv.classList.add('character')
var container = document.getElementById('guessed-characters');
container.append(guessedCharDiv);
};
Hangman.prototype.updateSecretCharacter = function(char) {
var allSecretChars = document.getElementsByClassName('secret-character');
for (var i = 0; i < allSecretChars.length; i++) {
var secretChar = allSecretChars[i];
if (char.toLowerCase() === secretChar.innerHTML.toLowerCase()) {
secretChar.classList.remove("hidden");
}
}
};
Hangman.prototype.resetGameState = function() {
document.body.innerHTML = this.originalGameState;
};
Hangman.prototype.initializeSecretWord = function() {
var container = document.getElementById("secret-word");
for (var i = 0; i < this.secretWord.length; i++) {
var secretChar = this.secretWord[i];
var div = createDivWithText(secretChar);
div.classList.add('secret-character', 'hidden');
container.append(div);
}
};
Hangman.prototype.alreadyGuessed = function(guessedKey) {
return includes(guessedKey, this.charactersGuessed);
};
Hangman.prototype.isInvalidGuess = function(guessedKey) {
var isAlphabetic = includes(guessedKey, 'abcdefghijklmnopqrstuvwxyz');
return !isAlphabetic;
};
Hangman.prototype.updateGameMessage = function(msg) {
var messageContainer = document.getElementById('game-message');
messageContainer.innerHTML = msg;
};
Hangman.prototype.clearGameMessage = function() {
var messageContainer = document.getElementById('game-message');
};
Hangman.prototype.correctGuess = function(guessedKey) {
return includes(guessedKey, this.secretWord);
};
function initialize() {
var modeChosen = false
var wordBank = ["grass", "tree", "boat", "house", "thing", "coding", "computer",
"leaves", "food", "chair", "dog", "cat", "tiger", "ninja", "snake", "rabbit", "wall", "book",
"notebook", "math", "science", "programming", "plant", "hummingbird", "game", "basketball", "soccer", "football",
"tennis", 'read', "mouse", "rat", "globe", "poster", "fraction", "multiplication", "cards", "board", "plank",
"shorts", "pants", "jacket", "socks", "plane", "bear", "chicken", "rooster", "ball", "soccerball", "green", "red", "purple", "blue", "orange",
"ant", "baboon", "badger", "wolf", "python", "fox", "goat", "panda", "shark", "hawk", "seal", "beaver", "toad",
"rhino", "owl", "otter", "lion", "hole", "floor", "flood", "drought", "tsnuami", "banana", "city", "anger", "happiness",
"family", "glass", "grass", "dirt", "stone", "needle", "key", "hangman", "word", "fate", "magic", "spell", "magician", "chart", "stuff",
"fence", "flower", "cord", "fan", "clock", "father", "mother", "brother", "sister", "aunt", "uncle", "grandfather", "grandmother",
"teacher", "school", "box", "feline", "moose", "antler", "horn", "biology", "chemistry", "physics", "division", "fur", "coat", "paws",
"binder", "battery", "circuit", "electricity", "gravity", "universe", "galexy", "world", "paper", "pencil", "container", "root",
"pi", "gnat"];
var randomWord = getRandomEntry(wordBank);
var game = new Hangman(randomWord);
game.initializeSecretWord();
document.addEventListener('keydown', function(event) {
if (modeChosen) {
if (game.playerWon() || game.playerLost()) {
return;
}
var guessedKey = event.key.toLowerCase();
if (game.isInvalidGuess(guessedKey)) {
return;
}
if (game.alreadyGuessed(guessedKey)) {
game.updateGameMessage('You already guessed ' + guessedKey);
return;
}
game.addToCharactersGuessed(guessedKey);
game.appendGuessedCharacter(guessedKey);
if (game.correctGuess(guessedKey)) {
game.updateGameMessage('Yes! The secret contains ' + guessedKey);
game.updateSecretCharacter(guessedKey);
}
else {
game.updateGameMessage('Nope, the secret does not have a ' + guessedKey);
game.revealBodyPart();
}
if (game.playerWon() || game.playerLost()) {
game.showGameEnd();
return;
}
}
else {
return;
}
});
var singleplayerButton = document.getElementById('singleplayer');
singleplayerButton.addEventListener('click', function() {
var gameDivs = document.getElementById('game-started');
gameDivs.classList.remove('no-display');
var setupDivs = document.getElementById('game-unstarted');
setupDivs.classList.add('no-display');
modeChosen = true;
return;
});
var multiplayerButton = document.getElementById('multiplayer');
multiplayerButton.addEventListener('click', function() {
var gameDivs = document.getElementById('game-started');
gameDivs.classList.remove('no-display');
var setupDivs = document.getElementById('game-unstarted');
setupDivs.classList.add('no-display');
modeChosen = true;
return;
});
var playAgainButton = document.getElementById('restart-game');
playAgainButton.addEventListener('click', function() {
game.resetGameState();
initialize();
});
};
initialize();
</script>
</html>I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...
I am currently utilizing the [hidden] attribute within my application to conceal certain elements based on a specific condition. The situation is such that I have two divs - one for displaying results and another for showing the text "No results". Both t ...
After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...
Imagine having the following strings. i and we. me and you. he and she. Is it possible to achieve the desired result using PURE CSS? I and We. Me and You. He and She. If capitalizing the text using text-transform: capitalize is used, it will yi ...
In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...
Looking to incorporate the Supersized Fullscreen background found at Supersized Interested in having the slider appear on the right half of the site with content on the left half. Want the content to move when scrolled while keeping the background station ...
Here is the HTML code I am working with: <div id="content"> <h1>Title 1</h1><br><br> <h2>Sub-Title 1</h2> <br><br> Description 1.<br><br>Description 2. <br><br ...
Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...
I have added a search icon to the form input field. Check it out here: https://i.sstatic.net/pnv6k.jpg #searchform { position: relative; } #searchform:before { content: "\f118"; font-family: "pharma"; right: 0px; position: absolute; ...
How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear? Does anyone ha ...
I'm experimenting with an API on apiary.io and attempting to retrieve data from it using Angular, but I'm encountering issues with the call. The setup seems straightforward, so I'm not quite sure what's causing the problem: HTML: < ...
Looking to create a login form similar to the one shown in this image using Bootstrap5, but struggling to do so. Is there anyone who can assist me in creating a login form like the one mentioned here? I am new to Bootstrap and CSS. Here is my current temp ...
I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...
<span class="_c24 _2ieq"> <div><span class="accessible_elem">Birthday</span> </div> <div>April 28, 1998</div> </span> I need to extract the date from a website that has the structure above. How can I us ...
In the code snippet below, there is a .square-container that is absolutely positioned and contains a square. The goal is to vertically center the .square-container within its parent div. .container { position: relative; background-color: blue; } ...
When creating a template for Outlook, I encountered an issue where the logo appeared on the right and the link text was on the left, which is the opposite of what I wanted. How can this be resolved? <center> <table width="600px;" style="margin:au ...
I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...
I've been working with an HTML table that has a sticky header, meaning the header stays in place as the table scrolls vertically. However, I'm facing an issue where I need the header to move along with the horizontal scroll, but remain fixed ver ...
Imagine I have the following sentence written in HTML: <p>Please input your licence number</p> An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide ...
I have been given a challenging Javascript assignment that involves using loops to create a counting betting game. The concept is simple: the User inputs a number, and the computer randomly selects a number between 1 and 10. The User can then bet up to 10 ...